0

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

这是一个示例，但不幸的是，它仅在我将光标传递到子 div 时才有效：

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

4

4 回答 4

5

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

工作演示：jsFiddle

于 2012-08-14T13:11:49.090 回答
1

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

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

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

于 2012-08-14T13:12:16.500 回答
1

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

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

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

于 2012-08-14T13:24:59.057 回答
0

这与 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
于 2012-08-14T13:10:29.240 回答