我有一张图片,上面有一个文本 block ,当我将鼠标悬停在图片或 text-block
上时,我希望文本 block 得到一个 框-阴影
。
问题 当我尝试从图像触发 text-block
时,它似乎不起作用,尤其是 box-shadow
还有另一个属性,比如
color
它会触发。
这是一个 fiddle :https://jsfiddle.net/x5Lr32xb/
HTML
<ul id="button-container">
<li>
<a href="#">
<img class="htmllogo" src="images/HTMLLogo.png">
<div class="html-text-block">
<h2>HTML</h2>
<p>My web projects</p>
</div>
</a>
</li>
<li>
<a href="#">
<img class="csharplogo" src="images/CSHARPLogo.png">
<div class="cs-text-block">
<h2>C#</h2>
<p>My windows projects</p>
</div>
</a>
</li>
</ul>
CSS
/*Containers*/
#button-container {
padding: 0;
margin:0;
list-style: none;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
margin-top: 33vh;
margin-left: 50vw;
transform: translate(-50%, -50%);
width: 90vw;
height: 56vh;
align-items: center;
}
#button-container li {
position: relative;
display: inline-block;
}
#button-container .html-text-block, .cs-text-block {
position: absolute;
bottom: 0px;
width: 100%;
box-sizing: border-box;
background-color: #fff;
padding-left: 5px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
transition: box-shadow 0.5s cubic-bezier(.25,.8,.25,1);
}
/*Hovers*/
#button-container .html-text-block:hover, .cs-text-block:hover{
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
img:hover + .html-text-block {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
最佳答案
你必须使用这个:
#button-container img:hover + .html-text-block
#button-container .html-text-block 比 .html-text-block 更具体
关于html - div 悬停触发器不适用于 box-shadow,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50086772/