在不同的div悬停时背景图片更改

Question

我是网页设计的新手，现在正努力创建自己的网站的一部分，我需要以某种方式实现这一目标：

当“主体背景”的一部分被悬停时，将背景更改为“ B”，而当鼠标不在该部分上时，我需要将其更改回背景“ A”。

到目前为止，这就是我所拥有的：（我被告知要尝试使用javascript，但是由于某些原因它无法正常工作！） jsfiddle.net

就目前而言，我的html头上有javascript，如下所示：

<head>    
<script>

$('#hover').hover(function() {
    $('body').removeClass('nohover').addClass('hover');
}, function(){
    $('body').addClass('nohover').removeClass('hover');
});

</script>

</head>

这是我想在悬停椰子时显示的内容： http ://i.stack.imgur.com/ek98U.jpg

Answer 1

您的#hover元素需要具有背景色或图像，或具有使其可悬停的东西。

JSFIDDLE

#hover {
    /* your styles ... */
    background-color:#fff; /* or something */
}

另外，是的，请确保已在Frameworks＆Extensions侧栏中选择了jQuery。

Answer 2

根据OP评论更新了答案

在您的jsFiddle中，您需要选择JQuery库。 您的代码工作正常。

在Frameworks＆Extensions上，从顶部的下拉框选择一个JQuery库。

为了扩展我的答案，我认为您的代码比需要的复杂。 这是修订（简化）的版本：

的HTML

<div id="coconut"></div>

的CSS

body {
    background-image:url('http://s5.postimg.org/6qbplw2xj/Background_main.jpg');
    background-position:top center;
    background-repeat: no-repeat;
    background-color:black;
    height:800px;
    width:800px;
}

#coconut {
    position:absolute;
    width:450px;
    height:400px;
    top:300px;
    right:20px;
    border: 2px solid red;
}

.hover {
    background-image:url('http://s5.postimg.org/8jj7nydhz/Background_main.jpg');
}

jQuery查询

$('#coconut').hover(function() {
    $('body').addClass('hover');
}, function(){
    $('body').removeClass('hover');
});

小提琴： http : //jsfiddle.net/wQdVv/7/

Answer 3

使用:hover伪类而不是jQuery。

#hover:hover {
/* your code */
}

而且，对于透明图像，应使用.png而不是.jpg 。

Answer 4

谢谢你，@ gvee，我可以在我的jsfiddle上运行它，但是在我的网站上却不起作用:(我从Google添加了jquery库，但是当我将椰子悬停时没有任何反应:( – @rafacardosoc

我认为这可能是因为jsFiddle为您添加了一些您没有意识到的额外代码。

这是供您使用的完整html脚本。 请特别注意以$(document).ready(...

<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $('#coconut').hover(function() {
            $('body').addClass('hover');
        }, function(){
            $('body').removeClass('hover');
        });
      });
    </script>
    <style type="text/css">
      body
      {
        background-image: url('http://s5.postimg.org/6qbplw2xj/Background_main.jpg');
        background-position: top center;
        background-repeat: no-repeat;
        background-color: black;
        height: 800px;
        width: 800px;
      }

      #coconut
      {
        position: absolute;
        width: 450px;
        height: 400px;
        top: 300px;
        right: 20px;
        border: 2px solid red;
      }

      .hover
      {
        background-image: url('http://s5.postimg.org/8jj7nydhz/Background_main.jpg');
      }
    </style>
  </head>
<body>

  <div id="coconut"></div>

</body>
</html>

在不同的div悬停时背景图片更改

问题描述

4 个解决方案

解决方案1
2 2013-07-23 15:39:55

解决方案2
1 2013-07-23 15:39:11

的HTML

的CSS

jQuery查询

解决方案3
0 2013-07-23 15:45:35

解决方案4
0 已采纳 2013-07-23 16:30:46

在不同的div悬停时背景图片更改

问题描述

4 个解决方案

解决方案1 2 2013-07-23 15:39:55

解决方案2 1 2013-07-23 15:39:11

的HTML

的CSS

jQuery查询

解决方案3 0 2013-07-23 15:45:35

解决方案4 0 已采纳 2013-07-23 16:30:46

解决方案1
2 2013-07-23 15:39:55

解决方案2
1 2013-07-23 15:39:11

解决方案3
0 2013-07-23 15:45:35

解决方案4
0 已采纳 2013-07-23 16:30:46