Div 不透明度 onHover 的单独 Div答案

【问题标题】：Div Opacity onHover Of A Separate DivDiv 不透明度 onHover 的单独 Div
【发布时间】：2014-10-12 15:48:58
【问题描述】：

我正在尝试创建一个仅使用 CSS 的事件，当我将鼠标悬停在一个单独的 div 上时，它的 DIV（白色）从 0.6 不透明度变为 1.0 不透明度，以至于当我将鼠标悬停在一个 div 上时其他看起来好像是淡出的。

如果我想让悬停在上面的 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。

有什么帮助吗？

【问题讨论】：

如果不引入一些 JavaScript，这是不可能的，因为 .s1 不是 #sell2 的子代。
Is there a CSS parent selector?的可能重复
不，纯 CSS 绝对不可能。反过来也是可能的。可以将#sell1 悬停，然后使.s1 淡出，因此您可以使用#sell1:hover ~ #sell2 .s2 { ... }，另见jsfiddle.net/LinkinTED/UgsyL/190
@LinkinTED，我想你回答了这个问题
@Brian：不，他想悬停#sell2并触发.s1...而不是悬停#sell1触发.s2... :)

标签： html css hover opacity

【解决方案1】：

这不是我最初提出的问题的答案，但它是一种解决方法，我最终发现它适用于我想做的事情。

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/

【讨论】：

很高兴你让它工作了，但在语义上它丑得要命。将块元素放在列表中（尽管 HTML5 允许这样做），我仍然认为这是不好的做法。并且不允许在列表中换行。而是在第一个项目中添加一个 margin-bottom。
是的，我知道我已经下定决心要在让它变得不那么难看之前找到解决方案，我现在让它看起来好多了，而不是使用列表，我使用了一系列 div。 CSS 看起来非常相似，但只是意味着一切都是 DIV。

【解决方案2】：

以您当前的 HTML 设置，这是不可能的。然而，正如 LinkinTED 指出的那样，可以通过设置 #sell1:hover ~ #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 提供的代码设置悬停样式。

【讨论】：