[英]Change first-child css on parent hover
The fiddle of the sample is here: http://jsfiddle.net/3cYtX/12/ 样本的小提琴在这里: http : //jsfiddle.net/3cYtX/12/
I have an element representing an image (say, video image screen) and a child element representing another image (say 90x60, the "play" icon). 我有一个代表图像的元素(例如,视频图像屏幕)和一个代表另一个图像的子元素(例如90x60,即“播放”图标)。
<div class="big">
<img class="small">
</div>
The small image is centered vertically and horizontally. 小图像垂直和水平居中。
I want when I over the big image the small one change its opacity. 我希望当我查看大图时, 小图改变其不透明度。
The code bellow works only when I hover the small image. 仅当我将小图像悬停时,下面的代码才起作用。
.small {
opacity: 0.5;
}
.small:hover {
opacity: 0.9;
}
Is there a way to fix that (change on hover the big image) only via CSS? 有没有办法仅通过CSS来解决此问题(将鼠标悬停在大图上)?
.big {
width:200px;
height:150px;
background-color: green;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.small {
opacity: 0.9;
background: red;
width:90px;
height:60px;
}
.big:hover > .small {
opacity: 0.5;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.