jQuery：将鼠标悬停在另一个div上时，如何控制div的不透明度？

Question

我目前正在使用非常简单的导航来浏览我的投资组合网站。 但是我想做的是，当鼠标悬停在类型下方时，使类型下方的阴影变得更强（阅读：更高的不透明度/更暗）。

现在，我的代码如下所示，并且不会产生任何错误，但也不执行任何操作。

为了更好地理解我的意思，请看一个带有实际例子的网站 。

/* 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％。

Answer 1

这行是错误的-它正在将一堆参数传递给$()函数。

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

如文档所述 ，jQuery不希望N个参数作为选择器，而是1：

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

通常的做法（也是一种好的做法）是提供一组应该执行某类通用操作的对象，或者以比列出所有ID更明智的方式选择它们。 根据当前的HTML，此选择器将菜单中的所有阴影<div>都保存下来，并且更短-如果以后再添加新的菜单元素，则无需修改代码，例如：

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

我也看到你有这个：

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

这是真的，真的，错误。 ID在文档中应该是唯一的。 通过在文档中包含多个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强大的选择器从文档中获得所需的内容。

Answer 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;
}