我需要在链接上悬停时更改 div 中的背景图像。目前，当您单击链接时，图像会发生变化，但我需要将其悬停，因此当它单击链接时，它会转到特定的网页。
这是我目前拥有的
http://www.twist-dev.co.uk/hover/
非常感谢任何想法或帮助。
【问题讨论】：
标签： jquery html css hyperlink hover
js
$(".list li a").hover( function() { // Changes the .image-holder's img src to the src defined in .list a's data attribute.
var value=$(this).attr('data-src');
$(".image-holder img").attr("src", value);
});
css
.image-holder {
float: left;
margin-right: 100px;
display: block;
width: 350px;
height: 500px;
background-color: grey;
}
.list {
margin: 0;
padding: 0;
list-style: none;
padding-top: 200px;
}
a {
color: red;
margin-bottom: 20px;
text-decoration: none;
display: inline-block;
text-transform: uppercase;
font-family: Arial, sans-serif;
}
html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-holder">
<img src="http://placehold.it/350x150">
</div>
<ul class="list">
<li><a href="#" data-src="http://placehold.it/350x150">Link 1</a></li>
<li><a href="#" data-src="http://placehold.it/350x250">Link 2</a></li>
<li><a href="#" data-src="http://placehold.it/350x350">Link 3</a></li>
</ul>
【讨论】：
您可以使用mousenter 和mouseleave 事件。
您的代码将是：
$(document).ready(function() {
$("#cf7_controls > span").mouseenter(function() {
$("#cf7 img").removeClass("opaque");
var newImage = $(this).index();
$("#cf7 img").eq(newImage).addClass("opaque");
$("#cf7_controls span").removeClass("selected");
$(this).addClass("selected");
});
});
您可以在此处找到更多详细信息： https://api.jquery.com/mouseenter/
【讨论】：
实现它的一种方法是，例如向菜单容器的子项添加数据属性
<p id="cf7_controls">
<span class="selected"></span>
<span data-image="cylinder">CYLINDER HEAD & BARRELS</span>
<span data-image="crankcase">CRANKCASES</span>
<span data-image="cooling">COOLING SYSTEM</span>
<span data-image="intervals">ENGINE INTERNALS</span>
</p>
然后在你的javascript文件中添加
$("#cf7_controls span").hover(function(){
//Find the image wich refers to the hovered link
var image = $(this).data("image");
$( "img[src^="+image+"]").css({ opacity: 1 });
})
【讨论】：
这是所需的代码：
p#cf7_controls {
text-align:center;
}
#cf7_controls span {
padding-right:2em;
cursor:pointer;
}
#cf7 {
position:relative;
height:519px;
width:548px;
margin:0 auto 10px;
}
#cf7 img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
#cf7 img.opaque {
opacity:1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=1);
} <body>
<div id="cf7" class="shadow">
<img class='opaque' src="https://www.twist-dev.co.uk/hover/base.png"/>
<img src="https://www.twist-dev.co.uk/hover/https://www.twist-dev.co.uk/hover/cylinder.png" alt='1'/>
<img src="https://www.twist-dev.co.uk/hover/crankcase.png" alt='2'/>
<img src="https://www.twist-dev.co.uk/hover/cooling.png" alt='3'/>
<img src="https://www.twist-dev.co.uk/hover/intervals.png" alt='4'/>
</div>
<p id="cf7_controls">
<span class="selected"></span>
<span>CYLINDER HEAD & BARRELS</span>
<span>CRANKCASES</span>
<span>COOLING SYSTEM</span>
<span>ENGINE INTERNALS</span>
</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#cf7_controls span").on('mouseover', function() {
$("#cf7 img").removeClass("opaque");
var newImage = $(this).index();
$("#cf7 img").eq(newImage).addClass("opaque");
$("#cf7_controls span").removeClass("selected");
$(this).addClass("selected");
});
});
</script>
</body>【讨论】：