html - 将鼠标悬停在不同 div 中的链接上时如何隐藏图像

Question

我找遍了这个，我似乎无法弄明白。我有一个链接列表，将鼠标悬停在每个链接上时会显示图像。当没有链接悬停时，我在同一个占位符中也有一个默认图像。当链接显示其图像时，如何使默认图像消失。我不想使用背景来覆盖默认图像。

https://jsfiddle.net/76tnfh96/2/

HTML:

<div class="links">
<p class="default_img"><a><img src="http://thedeskdoctors.com/Images/LifePreserver.jpg"></a></p>
        <ul id="over" class="links">
                <li><a>Link 1<span><img src="http://innovativeprofessionaloffices.com/wp-content/uploads/2014/09/IPOLogo.png"></span></a></li>
                <li><a>Link 2<span><img src="http://mojosimon.files.wordpress.com/2011/12/large-company.jpg?w=600"></span></a></li>
                <li><a>Link 3<span><img src="http://innovativeprofessionaloffices.com/wp-content/uploads/2014/07/seo-for-small-business-300x200.jpg"></span></a></li>
        </ul>
</div>

CSS:

<style type="text/css">

.links .default_img a {
  top:100px;
    float:right;
  width:100px;
  height:100px;
    background:#000000;
    position:absolute;
  display:none;
}
/*Link position*/
ul.links {
    list-style:none;
    padding:0;
    width:100px;
}
.links li {
    width:200px;
    color:#000000;
}

/*Hover Image Position/transition out*/
.links li a span, .links li a b {
    position:absolute;
    right:8px;
    top:-999em;
    display: none;
}

.links li a:hover span {
    top:24px;
    display: block;
}

</style>

Answer 1

使用jquery:

$("li a").mouseenter(function() {
  $(".default_img").eq(0).hide();
});

$("li a").mouseleave(function() {
  $(".default_img").eq(0).show();
});