Question

我在div上有一个背景图像，当我将鼠标悬停在div中的链接上时，我想将其位置从中心底部更改为中心顶部。

我不会很好地讲jQuery，我有点像法国的美国人，只知道parlez vous，但是这里有。

这是html：

<div class="video-link">
 <a href="#">Watch the Pack It Videos Now.</a>
</div>

这是CSS：

.video-link { 
        width: 610px;
        height: 68px;
        background: url(../_images/btn_horz-video.png) no-repeat center bottom;
        margin: 10px 0 10px 50px; 
        }

.video-link a { 
        color: #000; 
        text-decoration: none; 
        border: none;
        font-size: 18px;
        display: block;
        padding: 25px 0 0 90px; font-weight: bold; }

最后但并非最不重要的是，这是jQuery：

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

以下是the page - 这是关于页面中间的“立即收看视频”图片。

感谢。

Answer 1

我只想改变它：

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

我在您的网站上对其进行了测试，但确实有效。

编辑：我做的是移除a并将悬停应用于div。然后我拿出了最接近的方法调用，并将css更改应用于此，因为它现在适用于div。显然，如果其他地方正在使用这个CSS，这将无效。但我没有看到任何。

Answer 2

在.closest(selector)，而不是".div"，您需要"div"，如下所示：

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

.div是class selector寻找class="div"元素，而div是element selector，正在寻找<div>。

Answer 3

请参阅jQuery Mouseover。

当我将鼠标悬停在链接上时，如何使用jQuery更改div背景？

3 个答案: