CODEWITHSUNDEEP
htmlcss
Lightspeed360
Lightspeed360

Reputation: 161

Css Accessing a img id inside of a div id

<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?

Upvotes: 1

Views: 6225

Answers (3)

Brian Coolidge
Brian Coolidge

Reputation: 4659

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'"

Upvotes: 1

Mi-Creativity
Mi-Creativity

Reputation: 9664

"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>

Upvotes: 0

chris_blues
chris_blues

Reputation: 129

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...

Upvotes: 0

Related Questions