将鼠标悬停在另一个 div 中的 link 上时如何隐藏图像

Question

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

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

只是更改了一些内容，因此您不必使用 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>

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

Answer 3

您可以像您已有的那样保留整个标记，并将此 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

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

将鼠标悬停在另一个 div 中的 link 上时如何隐藏图像

How to hide image when hovering on a link in a different div

html

css

image

hover