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

You can leave your whole Markup like what you already had, and add this JavaScript code to your page. You do not need to add any frameworks, and this runs on all browsers.

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

调用asp.net服务器方法

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

Example 2

（移动图像以获得更好的测试目的）

如何在悬停在不同div中的链接上时隐藏图像

3 个答案: