所以我想改变我的 div 的悬停效果。当我开始这个元素时,我按照我现在想要的方式拥有它,但当时我不想要那样,所以我改变了它。现在我似乎无法将其更改回来。
这是我的代码,
HTML
<div id="left">
<div id="leftImage">
//the background image
</div>
<div id="overlayLeft">
//a logo that goes on top of the image when not hovering over it
</div>
</div>
<div id="right">
<div id="rightImage">
//the background image
</div>
<div id="overlayRight">
//a logo that goes on top of the image when not hovering over it
</div>
</div>
CSS
body {
background: #ffff;
}
/* Setup for the halves of the screen */
#right
{
/* Set rules to fill background */
min-height: 100%;
min-width: 50%;
/* Set up proportionate scaling */
width: 50%;
height: auto;
position: fixed;
top: 0;
right: 0;
background: #389A7A;
background-size:cover;
}
#left
{
/* Set rules to fill background */
min-height: 100%;
min-width: 50%;
/* Set up proportionate scaling */
width: 50%;
height: auto;
position: fixed;
top: 0;
left: 0;
background: #0C4270;
background-size:cover;
}
/* Setup for the image containers */
#rightImage, #leftImage
{
opacity:1.00;
filter: alpha(opacity=100); /* For IE8 and earlier */
background: rgba(0, 0, 0, 0.15);
-webkit-transition: opacity 2.00s ease;
-moz-transition: opacity 2.00s ease;
transition: opacity 2.00s ease;
position: relative;
}
#rightImage:hover, #leftImage:hover
{
opacity:0.15;
filter: alpha(opacity=15); /* For IE8 and earlier */
background: rgba(0, 0, 0, 1.0);
}
#rightImage:hover + #overlayRight, #leftImage:hover + #overlayLeft
{
visibility: visible;
-webkit-transition: visibility 0.5s ease;
-moz-transition: visibility 0.5s ease;
transition: visibility 0.5s ease;
}
/* Setup for the images */
.rightImage
{
/* Set rules to fill background */
min-width: 50%;
min-height: 100%;
/* Set up proportionate scaling */
width: 50%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0px;
right: 0;
}
.leftImage
{
/* Set rules to fill background */
min-width: 50%;
min-height: 100%;
/* Set up proportionate scaling */
width: 50%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0px;
left: 0;
}
/* Setup for the logo image */
#overlayLeft
{
visibility: hidden;
}
.overlayLeft
{
/* Set rules to fill background */
min-width: 40%;
/* Set up proportionate scaling */
width: 40%;
/* Set up positioning */
position: absolute;
top: 35%;
left: 30%;
pointer-events: none;
}
#overlayRight
{
visibility: hidden;
}
.overlayRight
{
/* Set rules to fill background */
min-width: 40%;
/* Set up proportionate scaling */
width: 40%;
/* Set up positioning */
position: absolute;
top: 40%;
right: 30%;
pointer-events: none;
}
下面是实际代码:JsFiddle
所以我想要实现的是,当我将鼠标悬停在左侧 div 上时,现在发生在左侧 div 上的效果必须发生在右侧 div 上。使悬停工作的代码片段如下:
#rightImage:hover, #leftImage:hover
{
opacity:0.15;
filter: alpha(opacity=15); /* For IE8 and earlier */
background: rgba(0, 0, 0, 1.0);
}
我认为以下运算符之一可以工作:“+
”、“~
”,或者只是 :hover 和下一个 div 之间的简单空格(#rightImage:hover #leftImage
).
但我似乎无法让它工作.. 我究竟做错了什么?是元素没有相同的父元素吗?我尝试在整个 html 周围添加一个父 div。然而那没有用。
最佳答案
据我所知,悬停状态只能影响悬停的元素或子元素。您需要使用一些简单的 javascript 来实现这一点。
关于html - 在 div 悬停时更改其他 div css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30198897/