Css在div id中訪問img 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="#">Omg look at this!</a></li> 
      </ul> 
     </img> 
    </div> 

如何獲取css中的ul？

我有什麼到目前爲止

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

我怎樣才能接取它沒有剛開#menu？

Answer 1

在這裏你去，你應該使用CSS的相鄰選擇。

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

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

爲您體會到善良，這裏是爲您的jsfiddle。

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代碼。我所做的只是爲圖像和元素添加另一個包裝。所以當你懸停link-wrapper時，其中的ul會在css中生效。假設內部會有更多img和菜單，我們希望使其變爲動態。

#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。不幸的是，我在香草javascript中並不擅長。

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

Answer 2

我會跟Coz的建議去。但首先，只需在第二行刪除</img >。 :)

然後在CSS通過

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

其他選項訪問：給這個<UL>一個id ...

Answer 3

「是否繼續開放，當我還懸停在內部或者只是在PIC文本」這是你需要JSFiddle什麼，這將只有工作，如果你有<div id="menu">內一個img元素..所以我們添加: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>