html - 在以下情况下如何使用 CSS 在悬停时更改元素属性

Question

我得到了一些网页元素，当鼠标悬停在图片上并叠加滑入时，我也想在用户将蓝色 div 悬停在图片下方时获得相同的效果。只有 css 才有可能吗？

例子如下:

http://jsfiddle.net/9pn8Z/10/

HTML

        <div class="rt_tiletext">
            <p>
                wards are focused oni wards are focused oni
                wards ards are focused oni wards areds are focused
                oni wards are focused oni wards are focused oni 
                wards are focused oni wards are focu wards are focused i .
            </p>
        </div>
    </a>
</div>

CSS:

.rt_tilewrap {
    padding: 10px;
    display: inline-block;
    text-align: left;
    vertical-align: top;
    background: rgba( 22, 255, 22, 0.3);
    width:355px;
}

.rt_tiletext {
    padding: 5px 0 5px 0;
    color: #666666;
    float:left;
    line-height: 1.1em;
    text-align: justify;
    display: block;
    background:skyblue;
}

.rt_tiletext p{
    padding: 0;
    margin: 0;
}
.rt_timg {
    width: 100%;
    height: auto;
    display:block;
    position: relative;
    float:left;
}

.rt_imgwrap{
    position:relative;
    overflow:hidden;
}

.rt_tileoverlay {
    height: 100%;
    width: 0;
    color:white;
    overflow:hidden;
    position: absolute;
    background-color: rgba(255, 255,0,  0.5);
    transition: all 0.4s ease-in-out;
    position: margin-top: 0px;
    margin-left: 0px;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
    z-index: 100;
}

.rt_imgwrap:hover > .rt_tileoverlay {
     width:355px;
}

感谢所有建议!

Answer 1

更改 CSS，以便在将鼠标悬停在父元素 .rt_tilewrap 上时应用效果。这样做时，过渡似乎在 .rt_imgwrap 和 .rt_tiletext 悬停时被激活。

jsFiddle example

.rt_tilewrap:hover .rt_tileoverlay {
    width:355px;
}

在这种情况下，您不能使用通用的同级选择器 ~ 或相邻的选择器 +，因为它们不会选择前一个元素。因此，最简单的解决方案是在父元素的 :hover 上添加效果。或者，JavaScript 是必需的，因为它能够在 DOM 中选择横向元素。