将鼠标悬停在链接上时,我无法更改div的背景图像,因此代码对我来说看起来不错,所以我很茫然,这里是代码:
Javascript:
$('#hover-01').on('mouseover', function(){
$('#hover-change').css('background-image', 'url("images/1.jpg")');
});
$('#hover-01').on('mouseout', function(){, function(){
$('#hover-change').css('background-image', 'url("images/5.jpg")');
});
HTML:
<div class="open-project-link">
<a id="hover-01" class="open-project"
href="project3.html">Bowman Clay</a>
</div>
<div class="responsive-section-image" id="hover-change"
style="background-image: url(images/5.jpg);">
<div class="overlay"></div>
</div>
jQuery版本:v2.1.1
有什么想法或建议吗?
编辑:代码确实起作用,但是这是第三方插件(我认为)存在的问题,因此我使用普通的javascript而不是jQuery进行了修复
最佳答案
'mousein
'不是您可以使用的事件处理程序。您应该使用mouseover
和mouseout
或mouseenter
和mouseleave
。请参阅jQuery鼠标事件here。
您还需要为容纳图像的容器指定宽度/高度,因为它没有内容。另外,在mouseout函数中有两个function()
声明,我在以下代码示例中对其进行了修复:
$('#hover-01').on('mouseenter', function(){
$('#hover-change').css('background-image', 'url(http://www.w3schools.com/css/trolltunga.jpg)');
});
$('#hover-01').on('mouseleave', function(){
$('#hover-change').css('background-image', 'url(https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4)');
});
#hover-change {
width:1000px;
height:300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="open-project-link">
<a id="hover-01" class="open-project"
href="project3.html">Bowman Clay</a>
</div>
<div class="responsive-section-image" id="hover-change">
<div class="overlay"></div>
</div>