0

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

当部分身体背景悬停时，将背景更改为“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

4

4 回答 4

2

您的#hover元素需要具有背景颜色或图像或允许其悬停的东西。

JSFIDDLE

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

另外，是的，请确保您在Frameworks & Extensions侧边栏中选择了 jQuery。

于 2013-07-23T15:39:55.253 回答
1

根据 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/

于 2013-07-23T15:39:11.067 回答
0

使用:hover伪类而不是 jQuery。

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

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

于 2013-07-23T15:45:35.617 回答
0

谢谢你，@gvee，我让它在我的 jsfiddle 上工作，但它在我的网站上不起作用:(我从谷歌添加了 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>
于 2013-07-23T16:30:46.563 回答