悬停时在容器div中显示另一个div

Question

我该怎么做：当光标经过容器div时，该容器内的另一个div具有其他属性，例如，我有一个容器div，其中包含另一个div且背景图片的不透明度为0.2。 我想使子div，当光标经过容器时，可见100％，属性opacity：1; 我怎样才能做到这一点？

这是一个示例，但不幸的是，仅当我将光标移到child div上时，它才有效：

http://jsfiddle.net/Vqmaw/2129/

Answer 1

将#maifis:hover规则更改为#container:hover #maifis 。 这基本上意味着，当＃ 容器悬停时，请将规则应用于其子#maifis 。

工作演示： jsFiddle

Answer 2

在现代浏览器中，这将起作用：

#maifis {
    opacity:0.2;
}
#container:hover #maifis {
    opacity:1;
}

第二行CSS表示将鼠标悬停在#container上时， #maifis包含的名为#maifis的元素的不透明度为1。

Answer 3

AFAIK，这对于纯CSS是不可能的。 根据您的信息和jsfiddle，使用此JQuery JS

$(function() {
    $('#container').bind('mouseover', function(){
        $('#maifis').addClass('visible');
    })
    $('#container').bind('mouseout', function(){
        $('#maifis').removeClass('visible');
    })
});

并将#maifis:hover更改为.visible在您的CSS中。

Answer 4

这与jQuery：

$('#maifis').hover( function(){
    $(this).animate({'opacity':1}, 300);
}, function(){
    $(this).animate({'opacity':0.2}, 300);
}); //Hover on maifis div

要么：

$('#container').hover( function(){
    $('#maifis').animate({'opacity':1}, 300);
}, function(){
    $('#maifis').animate({'opacity':0.2}, 300);
}); //Hover on container div