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