Question

当我将鼠标悬停在某个链接上时，我无法更改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修复它

Answer 1

＆＃39; mousein＆＃39;不是您可以使用的事件处理程序。您应该使用mouseover和mouseout，或mouseenter和mouseleave。请参阅jQuery鼠标事件here。

您还需要为容纳图像的容器指定宽度/高度，因为它没有内容。此外，您在mouseout函数中有两个function()声明，我在以下代码示例中修复了它：

＆＃13;

  $('#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)');
});

＆＃13;

#hover-change {
  width:1000px;
  height:300px;
}

＆＃13;

<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>

＆＃13;

Answer 2

使用此fiddle：

JS：

$('#hover-01').on('mouseenter', function(){
   $('#hover-change').css('background-image', 'url("images/1.jpg")');
});
$('#hover-01').on('mouseout', function(){
  $('#hover-change').css('background-image', 'url("images/5.jpg")');
});

Answer 3

你可以使用jQuery的toggleClass()方法来解决你的问题：

$(document).on('ready', function() {
  
  $('#link').on('mouseover', function() {
    //alert('sadasd');
    $('body').toggleClass('colored');
  });
  
  $('#link').on('mouseleave', function() {
    //alert('sadasd');
    $('body').toggleClass('colored');
  });
  
});

body.colored {
  background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a id="link" href="#">This is a Link</a>
</div>

希望这有帮助！

Answer 4

如果:hover ~悬停在hover-change上，您可以使用CSS hover-01更改#divToHover:hover ~ #divToChange { /*your code here*/ } div，如下所示：

#change {
  height: 300px;
  width: 300px;
  background-image: url("//www.google.com/favicon.ico");
}
#hover {
  height: 40px;
  width: 40px;
  background-color: green;
}
#hover:hover ~ #change {
  background-image: url(/favicon.ico);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="hover">hover</div>
<div id="change"></div>

self.button.titleLabel.text = @"Hello!";
[self.button setTitle:@"Hello!" forState:UIControlStateNormal];

Answer 5

尝试以下代码。确保为要更改背景的div设置高度和宽度。

问题与您使用的事件名称有关。请参阅here以获取鼠标事件列表

$('#hover-01').on('mouseover', function() {
     $('#hover-change').css('background-image', 'url("https://placehold.it/350x150/ffff00")');
   }).on('mouseout', function() {
     $('#hover-change').css('background-image', 'url("https://placehold.it/350x150/ff0000")');
   });

.responsive-section-image {
  height: 150px;
  width: 350px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.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" style="background-image: url('https://placehold.it/350x150/ff0000')">
  <div class="overlay"></div>
</div>

将鼠标悬停在链接上并更改div的背景图像--JQuery

5 个答案: