1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

show div when another div is hover

Discussion in 'CSS' started by huseinbandi, Dec 12, 2012.

0
  1. #1
    [​IMG]

    i want to ask something..

    how, if social media is hover,then.. blog archive is hiding..
     
    huseinbandi, Dec 12, 2012 IP
  2. riteshsanap

    riteshsanap Well-Known Member

    Messages:
    217
    Likes Received:
    2
    Best Answers:
    3
    Trophy Points:
    168
    #2
    for that you can use jQuery, it will hide Blog Archive when you are hovering over Social Media Link
     
    riteshsanap, Dec 12, 2012 IP
  3. huseinbandi

    huseinbandi Well-Known Member

    Messages:
    1,060
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    130
    #3
    i want use pure css, you can help me to solve this problem?
     
    huseinbandi, Dec 13, 2012 IP
  4. riteshsanap

    riteshsanap Well-Known Member

    Messages:
    217
    Likes Received:
    2
    Best Answers:
    3
    Trophy Points:
    168
    #4
    I don't think it is possible by using only CSS
     
    riteshsanap, Dec 13, 2012 IP
  5. huseinbandi

    huseinbandi Well-Known Member

    Messages:
    1,060
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    130
    #5
    huseinbandi, Dec 13, 2012 IP
  6. Sayedtaqui

    Sayedtaqui Greenhorn

    Messages:
    46
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    6
    #6
    Just copy and paste this code in a notepad and run it in a browser you will know .

    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
    $("#flip").click(function(){
    $("#panel").slideToggle("slow");
    });
    });
    </script>

    <style type="text/css">
    #panel,#flip
    {
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
    }
    #panel
    {
    padding:50px;
    display:none;
    }
    </style>
    </head>
    <body>

    <div id="flip">Click to slide the panel down or up</div>
    <div id="panel">Hello world!</div>


    </body>
    </html>
     
    Sayedtaqui, Dec 14, 2012 IP
  7. huseinbandi

    huseinbandi Well-Known Member

    Messages:
    1,060
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    130
    #7
    okay. i'm trying.. and wait on my progress. thx a lot huh..
     
    huseinbandi, Dec 18, 2012 IP
  8. TwitTwit

    TwitTwit Active Member

    Messages:
    117
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    55
    Digital Goods:
    1
    #8
    not quite sure what you are trying to achieve, but if it's okay for you to use CSS3 you might wanna try ":not:)hover)" to target sibling elements.

    <div id="widget-a" class="widget">
	...
</div>
<div id="widget-b" class="widget">
	...
</div>
<div id="widget-c" class="widget">
	...
</div>
    Code (markup):
    .widget:not(:hover) {
	display: none; /* or other effect */
	}
    Code (markup):
    so when you hover on widget a, widget b and c will be hidden
     
    TwitTwit, Dec 19, 2012 IP
    CMNS likes this.
  9. huseinbandi

    huseinbandi Well-Known Member

    Messages:
    1,060
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    130
    #9
    have you try to use:
    #a:hover > div#b+ div#c ?? like that?? use + and > sign....
     
    huseinbandi, Dec 19, 2012 IP