Hiding and revealing content on hover

Discussion in 'JavaScript' started by fadetoblack22, Apr 11, 2013.

0
  1. #1
    I have a an area of code on my site that I want to make dynamic and what to know how is the best way to do it.

    When each of the headers is hovered over I want the content in the "text test" area to change.

    Is this possible with css or does it need to be done with js? I was thinking the accordion code might do it, but I'm not sure how.
    ex.jpg
     
    fadetoblack22, Apr 11, 2013 IP
  2. xtmx

    xtmx Active Member

    Messages:
    359
    Likes Received:
    12
    Best Answers:
    4
    Trophy Points:
    88
    #2
    You cannot do what you are asking with pure CSS.

    (By the way, you do realize that this is not a good way to develop a website, right? Unless you have a client who is asking for it, of course)
     
    xtmx, Apr 11, 2013 IP
  3. fadetoblack22

    fadetoblack22 Well-Known Member

    Messages:
    2,399
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    160
    #3
    Ok, thanks.

    What do you mean it's not a good way to develop a site?
     
    fadetoblack22, Apr 11, 2013 IP
  4. xtmx

    xtmx Active Member

    Messages:
    359
    Likes Received:
    12
    Best Answers:
    4
    Trophy Points:
    88
    #4
    Some users might find that to be annoying, IMO. Also, some people browse the web with JavaScript disabled (which prevents your thing from working).
     
    xtmx, Apr 11, 2013 IP
  5. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #5
    Try this out,
    
 
<!DOCTYPE html>
<head>
   <style type="text/css">
       body{}
       #content-menu{float:left;}
       #content-wrap{float:left;margin-left:20px;}
           .hidden-content{display:none;}
           .default{display:block;}
   </style>
</head>
<body>
<ul id="content-menu">
   <li><a href="#" class="content-load" data-content="#div1">content 1</a></li>
    <li><a href="#" class="content-load" data-content="#div2">content 2</a></li>
    <li><a href="#" class="content-load" data-content="#div3">content 3</a></li>
</ul>
<div id="content-wrap">
   <div id="div1" class="hidden-content default">
        <h1>Div 1 Content</h1>
        <p>This is the content of hidden div1</p>
    </div>
   <div id="div2" class="hidden-content">
        <h1>Div 2 Content</h1>
        <p>This is the content of hidden div2</p>
    </div>
   <div id="div3" class="hidden-content">
        <h1>Div 3 Content</h1>
        <p>This is the content of hidden div3</p>
    </div>
</div>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
       $('.content-load').hover(function() {
           // set the div to be shown
           var content = $(this).data('content');
           // hide all content divs
           $('.hidden-content').hide();
           // show the selected div
           $(content).show();
       });
   </script>
</body>
    HTML:
     
    HuggyStudios, Apr 12, 2013 IP