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="#">Omg look at this!</a></li>
            </ul>
        </img>
    </div>

如何在css中获取ul？

到目前为止我有什么

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

我怎样才能获得它而不仅仅是获取#menu？

Answer 1

我会选择Coz的建议。但首先，只需删除＆lt; / img＆gt;在最后一行。：）

然后通过

在CSS中访问它

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

其他选项：给这个＆lt; ul＆gt;一个身份......

Answer 2

在这里，你应该使用css的相邻选择器。

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

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

为了欣赏这种善意，这里有一个适合你的方法。

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

哦，并修复你的HTML代码。删除刚刚创建的图像的结束标记。它不存在。

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

修改

在我的评论部分回答您的疑虑。

当我将鼠标悬停在文本内部或刚刚结束时，它是否保持打开状态图片？它不会对我保持开放

我修改了html代码。我做的是，只为图像和ul元素添加另一个包装器。因此，当您将link-wrapper悬停时，其中的ul将对css生效。假设#menu内会有更多 img和menu ，我们希望将其设置为动态。

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

这是jsfiddle。

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

但缺点是，当你将链接包装器悬停时，你必须编辑你的img src javascript。不幸的是，我在vanilla javascript中并不是那么好。

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

Answer 3

“当我将鼠标悬停在内部文字或图片上方时，它是否保持打开状态”这是您需要的JSFiddle，这只会如果img中有一个<div id="menu">元素，那么我们就可以了...所以我们将:hover添加到该父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>

Css在div id中访问img id

3 个答案: