如何使鼠標懸停在按鈕上時顯示圖像（無繼承）

Question

<div class="a"> 
<img class="img_c" id="img_id" src="~~"> 
<div class="b"> 
    <div class="c"> 
    <ul class="d" id="e"> 
    <li ~~~ > 
    </ul> 
    </div> 
</div> 
</div> 

我想通過將光標懸停在e按鈕上來顯示圖像。 b類具有最大寬度屬性，但圖像不受寬度限制，因此它必須位於類b之外。 如何在這種情況下編寫CSS代碼？

Answer 1

如果你可以使用jQuery，你可以使用類似的東西來顯示/隱藏圖像。

$("#e li").hover(
 
    function() { 
 
    $("#img_id").show(); 
 
    }, 
 
    function() { 
 
    $("#img_id").hide(); 
 
    } 
 
);

#img_id { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="a"> 
 
<img class="img_c" id="img_id" src="~~"> 
 
<div class="b"> 
 
    <div class="c"> 
 
    <ul class="d" id="e"> 
 
    <li>item 1</li> 
 
    <li>item 2</li> 
 
    <li>item 3</li> 
 
    <li>item 4</li> 
 
    </ul> 
 
    </div> 
 
</div> 
 
</div>