代码之家 › 专栏 › 技术社区 › forrest

当我使用jquery鼠标悬停在一个链接上时,如何让DIV背景发生变化?

jquery-selectors jquery

forrest · 技术社区 · 15 年前

当我将鼠标移到包含该分区的链接上时,我需要能够更改该分区中背景图像的位置。

这里是 page :这是右中的两个蓝色播放按钮。

我以前用过,但它坏了,我不能让它正常工作。

这是HTML:

<div class="h-video">
<p><a class="play-video" href="#flashArea3">Secondary headline goes here to say something you want. This needs to grab their attention.</a></p>
</div>

下面是jquery:

$(".h-video").hover(function() {
 $(this).closest("div").css({ 'background-position': 'top center' });
    }, function() {
 $(this).closest("div").css({ 'background-position': 'bottom center' });
});

如果有任何帮助,我将不胜感激。

谢谢。

3 回复 | 直到 15 年前

user113716 15 年前

<div>

http://jsfiddle.net/yr4yH/1/

.h-video {
    width: 461px;
    height: 67px;
    background-image: url("http://www.theideapeople.com/projectpath/ideapeople-new/_images/btn_video-home.png");
    background-position: bottom center;
    background-repeat: no-repeat
}

.h-video:hover {
    background-position: top center;
}â

.h-video <a> <

nopuck4you 15 年前

http://www.w3schools.com/css/pr_background-position.asp

Community Mohan Dere 8 年前

use CSS instead of javascript

.hover()

$(function() { ... }); jQuery's .ready() method

   // Wrap your code like this so it doesn't run until the DOM is ready
$(function() {
    $(".h-video").hover(function() {
     $(this).closest("div").css({ 'background-position': 'top center' });
        }, function() {
     $(this).closest("div").css({ 'background-position': 'bottom center' });
    });
});

jQuery's .closest() method