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

发布于 2024-09-08 13:05:43 字数 1140 浏览 3 评论 0原文

我在 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' });
});

这是页面 - 这是页面中间的“立即观看打包视频”图像。

谢谢。

原文

I have a background image on a div and I would like to change its position from center bottom to center top when I mouse over the link which is in the div.

I don't speak jQuery very well, I am kind of like the American in France, knowing little more than parlez vous, but here goes.

Here is the html:

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

Here is the 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; }

And last but not least, here is the jQuery:

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

Here is the page - It is the Watch the Pack It Videos Now image about midway down the page.

Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

猫性小仙女 2024-09-15 13:05:43

我只是将其更改为：

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

我在您的网站上测试了它并且它有效。

编辑：我所做的就是删除 a 并将悬停应用于 div。然后我取出了最接近的方法调用，并对其应用了 css 更改，因为它现在适用于 div。显然，如果其他地方正在使用这个CSS，那么这是行不通的，但我没有看到任何。

I would just change it to this:

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

I tested it on your site and it worked.

EDIT: What I did was remove the a and just applied the hover to the div. Then I took out the closest method call and just applied the css change to this since it now applies to the div. Obviously this wouldn't work if other places are using this css but I didn't see any.

回复收藏 0 原文

满栀 2024-09-15 13:05:43

在您的 .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="div" 元素，而 div 是一个元素选择器，寻找

。

In your .closest(selector), instead of ".div" you just need "div", like this:

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

.div is a class selector looking for a class="div" element, whereas div is an element selector, looking for <div>.

回复收藏 0 原文