如何使鼠标悬停在按钮上时显示图像（无继承）

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>