ボタンの上にカーソルを置いたときに画像を表示する方法（継承なし）

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を使用できる場合は、このようなものを使用して画像を表示/非表示にすることができます。

$("#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>