将鼠标悬停在不同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();
});

Answer 2

您可以将整个标记保留为已有的标记，然后将此 JavaScript 代码添加到您的页面。您不需要添加任何框架，它可以在所有浏览器上运行。

var links = document.querySelectorAll("#over a");

[].forEach.call(links, function(value) {

  var default_image = document.querySelector(".links .default_img a");

  value.addEventListener("mouseover", function(){
   default_image.classList.add("hidden");
  });

  value.addEventListener("mouseleave", function(){
   default_image.className = default_image.className.replace(/\hidden\b/,'');
  });
});

Example

（该示例可能会有点滞后，因为您的 CSS 会像野生动物一样移动您的图像）

Example 2

（为了更好的测试目的移动了图像）

Answer 3

只是更改了一些内容，因此您不必使用 jQuery/javascript。为了能够悬停动作另一个非依赖元素，您需要 javascript，因为这将被称为脱节翻转。

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



 <style type="text/css">

/*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 {
    position:absolute;
    left:200px;
    display: none;
}
.links li a span img {
    width: 100px; height:100px;
}
.links li a:hover span {
    top:24px;
    display: block;
  background: none;
}
.links li:first-of-type a span, .links li:first-of-type a:hover span{
  display:block;
  background: url(http://thedeskdoctors.com/Images/LifePreserver.jpg) no-repeat 0 0;
}
</style>

更改了图像大小，使其在测试时适合视图。