Question

如何执行以下操作：当光标通过容器div时，该容器内的另一个div具有其他属性，例如，我有一个容器div，其中包含另一个div，背景图片的不透明度为0.2。我想制作子div，当光标通过容器时，可见100％，属性不透明度：1; 我怎么能这样做？

这是一个例子，但不幸的是，只有当我将光标传递给子div时才有效：

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

Answer 1

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

工作演示：jsFiddle

Answer 2

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

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

第二个CSS行意味着当#container悬停在其上时，其中包含的名为#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简单地更改为您的css中的.visible。

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

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

4 个答案: