Question

我正在尝试创建一个只有CSS的事件，当我将鼠标悬停在一个单独的div上时，将有一个DIV（颜色为白色）从0.6不透明度变为1.0不透明度，以至于当我将鼠标悬停在一个div上时其他看起来好像已经消失了。

我的代码可以正常工作，如果我想要将鼠标悬停在淡入淡出但是我想悬停并改变另一个div而不是我正在盘旋的那个。

HTML

<div id="sell1">
<div class="s1"></div>
</div>
<div id="gap"></div>
<div id="sell2">
<div class="s2"></div>
</div>

CSS

#sell1 {
   height:100px;
   width:100%;
   background-color: rgb(50,70,130);
}
#sell2 {
   height:100px;
   width:100%;
   background-color: rgb(50,70,130);
}
#gap {
   height:50px;
   background-color:white;
}
.s1, .s2 {  
   width:100%;
   height:247px;
   position:absolute;
   background:rgba(255, 255, 255, 0.6);
   opacity:0;
   -webkit-transition: opacity .25s ease;
   -moz-transition: opacity .25s ease;
}
#sell2:hover .s1  {     
   opacity:1;
}

http://jsfiddle.net/UgsyL/186/

所以在这里我想悬停在“sell2”div上，让.s1从0.6变为1.0不透明度。

任何帮助？

Answer 1

使用您当前的HTML设置，这是不可能的。但是，正如 LinkinTED 指出的那样，通过样式#sold1：悬停〜＃sell2 .s2 {...}，可以将＃sell1悬停并使.s1淡出。

如果您只需要悬停＃sell2并更改.s1，则可以在HTML中切换其位置，使其成为：

<div id="sell2">
    <div class="s2"></div>
</div>
<div id="gap"></div>
<div id="sell1">
    <div class="s1"></div>
</div>

然后设置具有相对和绝对定位的div的样式，以及使用LinkinTED提供的代码设置悬停样式。

Answer 2

这不是我最初提出的问题的答案，但这是一个解决方法，我终于想通了，这对我想要做的事情有用。

<强> HTML

<ul>
    <li><div></div></li>
    <br/>
    <li><div></div></li>
</ul>

<强> CSS

div {
    background-color: rgb(40,80,120);
    height: 100px;
    width: 200px;
}
ul li {
    display: inline-block;
}

ul li div {
    opacity: 1;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    transition: opacity .5s;
}

ul:hover li div {
    opacity: .5;
}

ul:hover li div:hover {
    opacity: 1;
}

http://jsfiddle.net/xbMtN/7/

Div Opacity onHover of a Separate Div of Div

2 个答案: