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

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类具有max-width属性，但图像不受宽度限制，因此它必须在类b之外。 在这种情况下如何编写CSS代码？

Answer 1

如果你可以使用jQuery，你可以使用这样的东西来显示/隐藏图像。

＆＃13;

＆＃13;

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

＆＃13;

#img_id {
   display: none;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;