Css Accessing a img id inside of a div id

Question

<div id="menu">
  <img
    id="mb"
    src="MenuButton.png"
    draggable="false"
    style="-moz-user-select: none;"
    ondragstart="return false;"
    onmouseover="this.src='MenuButtonHover.png'"
    onmouseout="this.src='MenuButton.png'"
  >
    <ul>
      <li><a href="#">Content</a></li>
    </ul>
  </img>
</div>

How do I get the ul inside of css?

What I have so far

#menu mb:hover ul{ display: block; }

How can I acess it without just getting the #menu?

`` is a single tag. It has no closing tag and could not contain anything. — Vlad DX, Oct 28 '15 at 22:15
What are you trying to do? both your css and html have errors which make figuring out your desired effect very difficult. — Adam Buchanan Smith, Oct 28 '15 at 22:36
Well then please tell me how to fix it I want it so when you hover over the image it pops up a dropdown menu. Hope you understand im not that great at explaining. — Lightspeed360, Oct 28 '15 at 22:40
I fixed a few errors but, how can I make the list show when I hover over the image? — Lightspeed360, Oct 29 '15 at 00:46

score 1 · Accepted Answer · edited May 23 '17 at 12:29

Here you go, you should use adjacent selector of css.

#menu img:hover + ul { background:red; }

What does the "+" (plus sign) CSS selector mean?

For you to appreciate the goodness, here's a jsfiddle for you.

https://jsfiddle.net/g4frLaak/2/

Ohh, and fix your html code. Remove the end tag of image you've just created. It does not exists.

<div id="menu">

    <img id="mb"
    src="MenuButton.png"
    draggable="false"
    style="-moz-user-select: none;"
    ondragstart="return false;"
    onmouseover="this.src='MenuButtonHover.png'"
    onmouseout="this.src='MenuButton.png'">

    <ul>
        <li><a href="#">Omg look at this!</a></li>
    </ul>
</div>

EDIT

To answer your concern in my comment section.

Does it stay open when I also hover over the text inside or just over the pic? It dosen't stay open for me

I've revised the html code. What I did is, just add another wrapper for both image and the ul element. So when you hover the link-wrapper, the ul inside it will take effect on the css. Assuming that there will be more img and menu inside #menu, we would want to make it dynamic.

#menu .link-wrapper:hover ul { background:red; } 

<div id="menu">
    <div class="link-wrapper">
        <img id="mb"
            src="https://www.gravatar.com/avatar/7776e0b99bcafda15ca8c66946e6a623?s=32&d=identicon&r=PG&f=1"
            draggable="false"
            style="-moz-user-select: none;"
            ondragstart="return false;"
            onmouseover="this.src='https://www.gravatar.com/avatar/7776e0b99bcafda15ca8c66946e6a623?s=32&d=identicon&r=PG&f=1'"
            onmouseout="this.src='https://www.gravatar.com/avatar/7776e0b99bcafda15ca8c66946e6a623?s=32&d=identicon&r=PG&f=1'">
        <ul>
            <li><a href="#">Omg look at this!</a></li>
        </ul>
    </div>
</div>

Here's the jsfiddle again.

https://jsfiddle.net/g4frLaak/3/

But the downside is, you have to edit your img src javascript when you hover the link-wrapper. Unfortunately I'm not that good in vanilla javascript.

onmouseover="this.src='MenuButtonHover.png'"
onmouseout="this.src='MenuButton.png'"

You could mark it as an answer, just press the check button. Also, no problem. :) — Wesley Brian Lachenal, Oct 29 '15 at 01:33
7 Rep so close to upvoting! XD Does it stay open when I also hover over the text inside or just over the pic? It dosen't stay open for me. . . — Lightspeed360, Oct 29 '15 at 01:45
Well, based on your question, it only applies when you "hover" the IMG only. *edit* Let me edit my answer. — Wesley Brian Lachenal, Oct 29 '15 at 03:40

score 0 · Answer 2 · answered Oct 29 '15 at 01:11

0

I'd go with Coz's suggestion. But first, simply remove the </img> in the 2nd last line. :)

Then access it in CSS via

#menu #mb:hover ul{
  foo: bar;
}

Other option: give this <ul> an id...

answered Oct 29 '15 at 01:11

chris_blues

129
9

Mi-Creativity · Answer 3 · 2015-10-29T02:09:55.103

0

"Does it stay open when I also hover over the text inside or just over the pic" Here is what you need JSFiddle, this will only work if you have one img element inside the <div id="menu"> .. so we add the :hover to that parent div

#menu {
    width:300px;
}
#menu ul {
    display:none;
}
#menu:hover ul {
    display:block;
}

<div id="menu">
    <img id="mb" src="//placehold.it/300x50?text=normal" draggable="false" style="-moz-user-select: none;" ondragstart="return false;" onmouseover="this.src='//placehold.it/300x50/0f8000/ffffff?text=hover'" onmouseout="this.src='//placehold.it/300x50?text=normal'">
    <ul>
        <li><a href="#">Omg look at this!</a> </li>
    </ul>
</div>

edited Oct 29 '15 at 02:09

answered Oct 29 '15 at 01:57

Mi-Creativity

9,554
10
38
47

Ok thank you I changed the hover to a click toggle using javascript. It works perfectly again +1 to you if I could. You did fix the problem I had with the hover. :) :D – Lightspeed360 Oct 29 '15 at 02:30
No worries, I'm glad it helped you, you almost got the *vote up* ability, good luck to you – Mi-Creativity Oct 29 '15 at 02:36

Css Accessing a img id inside of a div id

3 Answers3