Question

我怀疑我的问题超出了此处的实施范围。此代码无效。我将它与类似的论坛帖子进行了比较，检查并重新检查。任何人都可以提供另一套眼睛。谢谢！

HTML：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="main.css" rel="stylesheet" type="text/css" />
<script type="text/javacript"    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">  </script>
<script type="text/javacript" src="mouseAction.js"></script>
</head>

<body>

  <div class="screen">
      <div class="button"></div>
  <!-- end .screen --></div>

CSS：

.button {
    display    : block;
    float      :right;
    background : url(images/playButton.png) no-repeat;
    height     : 151px;
    width      : 154px;
    margin     : 140px 216px 0px 0px;
}

脚本：

$(document).ready(function(){
    $(".button").hover(function () {
        $(this).css("background", "url(images/playButton_S2.png)");
    }, 
    function () {
        $(this).css("background", "url(images/playButton.png)");
    });
});

Answer 1

没有实际启动代码，有一点是突出的 “文/ javacript”
应该是 “文本/ JavaScript的”

Answer 2

要使jQuery与背景图像一起正常工作，请使用背景图像而不是背景。

CSS：

.button {
display    : block;
float      :right;
background-image : url(images/playButton.png);
background-repeat: no-repeat;
height     : 151px;
width      : 154px;
margin     : 140px 216px 0px 0px;
}

JS：

$(document).ready(function(){
$(".button").hover(function () {
    $(this).css("background-image", "url(images/playButton_S2.png)");
}, 
function () {
    $(this).css("background-image", "url(images/playButton.png)");
});
});

Answer 3

这可能不是您正在寻找的答案，但为什么不只是使用普通的CSS而不是javascript来完成这个简单的任务？这样就可以了：

.button {
    display    : block;
    float      :right;
    background : url(images/playButton.png) no-repeat;
    height     : 151px;
    width      : 154px;
    margin     : 140px 216px 0px 0px;
}

.button:hover {
   background-image: url(images/playButton_S2.png);
}

Answer 4

1你需要给你的按钮div一个ID＆amp;修复'javacript'拼写：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">  </script>
<script type="text/javascript" src="mouseAction.js"></script>
</head>

<body>

  <div class="screen">
      <div class="button" id="divButton"></div>
</div>

你的jQuery也错了..试试这个：

 $(document).ready(function() {
     var btn = $("#divButton");
     btn.hover(function() {
     btn.css("background-image", "url(images/Error.gif)");
     });

     btn.css("background-image", "url(images/Success.gif)");
 });

我没有看到你的屏幕div的任何CSS ..添加到你的CSS＆amp;根据需要进行修改

.screen {
    background-color: silver;
    height: 500px;
    width: 500px;
    }

使用jQuery hover和css属性

4 个答案: