Question

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

当身体背景的一部分被淹没时，将背景更改为“B”，当鼠标未超过该部分时，我需要将其更改回背景“A”。

这就是我到目前为止:(我尝试使用javascript，因为我被告知，但由于某种原因它不起作用！） jsfiddle.net

AS现在我在我的html头上有javascript，就像这样：

<head>    
<script>

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

</script>

</head>

这就是我想在COCONUT被撤消时出现的内容： http://i.stack.imgur.com/ek98U.jpg

Answer 1

您的#hover元素需要具有背景颜色或图像或允许其可以移动的内容。

JSFIDDLE

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

此外，是的，请确保您已在框架＆amp;中选择了jQuery。扩展程序侧栏。

Answer 2

根据OP评论更新答案

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

在框架＆amp;扩展程序从顶部的下拉框中选择了一个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上工作，但它在我的网站上没有工作:(我从谷歌添加了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 个答案:

HTML

CSS

JQuery的