2

I have a div that holds an image and an unordered list. 

<div id="holder">
  <img src="#" alt="some image"></img>
  <ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
  </ul>

I want the unordered list to be hidden until the div is hovered over. The css I currently have is:

#holder {width: 100%;}

#holder > img {width: 100px; height: 100px;}

#holder > ul {display: none;}

#holder > ul:hover {display: block;}

I'm pretty sure this could be solved with javascript, but I'm just barely learning it. Any help would be great!

strasbal
  • 143
  • 1
  • 11
  • 1
    Your `
    ` is not closed. Anyway, does what you have not work, and if not, in what way?
     –  Aug 05 '15 at 04:38
  • possible duplicate of [Style child element when hover on parent](http://stackoverflow.com/questions/7217244/style-child-element-when-hover-on-parent) –  Aug 05 '15 at 04:40
  • The javascript example works great, except I can't move away from the image icon to hover over the list items (eventually they'll be links). Any thoughts? – strasbal Aug 05 '15 at 05:28

4 Answers4

1

You can do it with CSS as below:

#holder:hover ul{
    display: block;
}

DEMO

NOTE - <img> will not have </img> From this source it is invalid and it should be closed like <img src="#" alt="some image"/>

Community
  • 1
  • 1
Guruprasad J Rao
  • 29,410
  • 14
  • 101
  • 200
0

You need to add the :hover attribute to the element you want to activate the change then add the child element (in this case ul) to the selector as follows:

#parent:hover child {
    /* css here */
}

Here is an example on JSFiddle using your code.

intcreator
  • 4,206
  • 4
  • 21
  • 39
  • Sorry, I should have added more code. I only want the hover to work when it's hovering over the img not the parent. But thanks for the suggestion! – strasbal Aug 05 '15 at 05:11
  • @strasbal I updated my code to do what I think you want with just CSS. However, if you want the bullets to stay visible to click on them, you'd be better off with the hover enabled over the entire `div`, not just the image. I added links in my code to demonstrate. – intcreator Aug 05 '15 at 05:54
0

css

#holder ul {
  display: none;
}

Jquery

$("#holder").mouseover(function(){
    $("#holder ul").show();
});

 $("#holder").mouseout(function(){
    $("#holder ul").hide();
});
prajeesh
  • 2,202
  • 6
  • 34
  • 59
  • This was perfect. The only issue is that when try to scroll over the list items, the list disappears. Any idea on how to fix this? – strasbal Aug 05 '15 at 05:15
0
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
 $("#holder ul").hide();
 $("img").hover(function(){
   $("#holder ul").show();
   },function(){
   $("#holder ul").hide();
   });
});
</script>
    <div id="holder">
      <img src="#" alt="some image">
      <ul>
        <li>List Item 1</li>
        <li>List Item 2</li>
        <li>List Item 3</li>
      </ul></div>

What you are searching is here. It's easy with JQuery..

hemnath mouli
  • 2,617
  • 2
  • 17
  • 35