jQuery：当悬停在另一个 div 上时，如何控制 div 的不透明度？答案

【问题标题】：jQuery: how can I control a div's opacity when hovering over another div?jQuery：当悬停在另一个 div 上时，如何控制 div 的不透明度？
【发布时间】：2009-06-10 04:31:18
【问题描述】：

我目前正在开发我的投资组合网站，该网站使用非常简单的导航。然而，我想要做的是当类型被悬停时，类型下方的阴影变得更强（阅读：更高的不透明度/更暗）。

现在我的代码如下所示，不会产生任何错误，但也不会做任何事情。

为了更好地理解我的意思，请查看the website with a live example。

/* Work | Play | About | Contact */
/* Shadow Opacity */
$(document).ready(function() {
    $('#workShadow', '#playShadow', '#aboutShadow', '#contactShadow').fadeTo( 0, 0.1);
});

/* Shadow Hover effect */
$(document).ready(function() {
    $('a#work').hover(function() {
        $('#workShadow').fadeTo( 200, 0.5);
    }, function() {
        $('#workShadow').fadeTo( 400, 0.1);
    });
});

/* Type movement on hovering */
$(document).ready(function() {  
    $('a.shift').hover(function() { //mouse in  
        $(this).animate({ paddingTop: 85, paddingBottom: 2 }, 200);  
    }, function() { //mouse out  
        $(this).stop().animate({ paddingTop: 75, paddingBottom: 12 }, 400);  
    });  
});

基本上我需要阴影元素（4 个单独的）的不透明度从 10% 的不透明度开始，当用户悬停时，类型向下移动（这部分正在工作），同时阴影变得更强，增加到 60%不透明度。然后在 mouseOut 上恢复到 10%。

【问题讨论】：

标签： javascript jquery html css css-selectors

【解决方案1】：

这一行是错误的——它向$() 函数传递了一堆参数。

$('#workShadow', '#playShadow', '#aboutShadow', '#contactShadow').fadeTo( 0, 0.1);

正如documentation 所说，jQuery 不希望 N 个参数作为选择器，而是 1：

$('#workShadow, #playShadow, #aboutShadow, #contactShadow').fadeTo( 0, 0.1);

给一组应该做某事的对象提供一个通用类或以比列出所有 ID 更智能的方式选择它们是常见（也是很好）的做法。根据您当前的 HTML，此选择器会获取菜单中的所有阴影 <div>s，并且要短得多 - 如果您稍后添加新的菜单元素，则无需修改代码，例如：

$('div','#navigationFrame').fadeTo(0, 0.1);

我也看到你有这个：

<li id="work"><a id="work" ...>

这真的，真的，错了。 ID 在文档中应该是唯一的。通过在文档中拥有超过 1 个 ID，您不仅违反了最佳实践，而且 jQuery 上的 ID 选择将变得疯狂并且无法按预期工作。像 fadeTo 选择器一样，你可以将阴影更改代码更改为更清洁：

$('a','#navigationFrame').hover(function() {
    $(this).next('div').fadeTo(200, 0.5);
}, function() {
    $(this).next('div').fadeTo(400, 0.1);
});

我用这些更改测试了网站，它运行良好。

我的示例中的选择器正在利用 jQuery 的context。通过这样做：

$('a','#navigationFrame');

或者这个：

$('div','#navigationFrame');

我们告诉 jQuery“只给我#navigationFrame 中的<a>（或<div>）元素。

相当于这样：

$('#navigationFrame').find('a');

利用这一点是个好主意。我看到您倾向于手动列出您正在尝试做的事情的元素，即使它们在某些方面都相似。试着改掉这个习惯，让 jQuery 强大的选择器从文档中得到你想要的。

【讨论】：

这非常有效，特别感谢您如此详细地解释它。我不敢相信我两次使用相同的 id.. 啊.. 我应该知道得更好。感谢您指出了这一点！再次，非常感谢。 J.

【解决方案2】：

我用这个：

$(".thumbs img").addClass('unselected_img');
$('.thumbs img').click(function() {
    $(this).addClass('selected_img');
    if ($(this).is('selected_img')) {
        $(this).removeClass('selected_img');
    } else {
        $('.thumbs img').removeClass('selected_img');
        $(this).addClass('selected_img');
    }
});

// hover the lists

$('.thumbs img').hover(
    function() {
        $(this).addClass('selected_img_h');
    }, 
    function() {
        $(this).removeClass('selected_img_h');
});`

和风格：

.selected_img
{
    opacity: 1; filter: alpha(opacity = 100);
    border:none;
}

.selected_img_h{
    opacity: 1; filter: alpha(opacity = 100);
    border:none;
}

.unselected_img
{
    opacity: 0.6; filter: alpha(opacity = 60);
    border:none;
}

【讨论】：