我有这样的东西
我尝试停用红色区域上的悬停,我可以将 img 位置设置为绝对位置,它确实发生了,但我认为这不是正确的方法。
我在这里提供了完整的代码 https://jsfiddle.net/m6ephL81/1/
<nav id='slideShow_control'>
<a href='#'>
<figure><img src='img/slide01_thumb.jpg' alt=''><figcaption>توسعه میدان های نفتی توسعه میدان های نفتی</figcaption></figure>
</a>
<a href='#'>
<figure><img src='img/slide02_thumb.jpg' alt=''><figcaption>توسعه میدان های نفتی</figcaption></figure>
</a>
<a href='#'>
<figure><img src='img/slide03_thumb.jpg' alt=''><figcaption>توسعه میدان های نفتی توسعه میدان های نفتی</figcaption></figure>
</a>
<a href='#'>
<figure><img src='img/slide04_thumb.jpg' alt=''><figcaption>توسعه میدان های نفتی</figcaption></figure>
</a>
</nav>
#slideShow_control {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
#slideShow_control > a {
position: relative;
display: block;
float: left;
width: 20px;
height: 20px;
margin-left: 20px;
}
#slideShow_control > a:first-child {
margin-left: 0;
}
#slideShow_control > a:before {
content: '';
display: block;
width: 20px;
height: 20px;
background-color: #09779C;
}
#slideShow_control > a:hover:after {
content: '';
position: absolute;
width: 20px;
height: 20px;
left:0;
top: -20px;
}
#slideShow_control > a:hover:before {
transition: all 0.2s ease-in-out;
background-color: transparent;
transform: scale(1.7);
box-shadow: 0 0 0 3px #09779C inset;
}
#slideShow_control figure {
opacity: 0;
text-align: center;
font-size: 0;
position: absolute;
bottom: -100%;
left: 50%;
transform: translateX(-50%) translateY(50%);
visibility: hidden;
transition: all 0.3s ease-out;
z-index: 3;
pointer-events: none;
}
#slideShow_control figcaption {
white-space: nowrap;
padding-top: 8px;
padding-bottom: 7px;
color: #fff;
font-size: 0.9rem;
}
#slideShow_control img {
transition: all 0.3s ease-out;
}
#slideShow_control a:hover figure {
opacity: 1;
visibility: visible;
bottom: 30px;
transform: translateX(-50%) translateY(0);
pointer-events: all;
}
我将感谢您的 css 或 js 解决方案。
最佳答案
非常长的文本使图形元素比图像更宽。看看this fiddle所以你可以想象它。请注意第三个数字很大,因为我在其中复制并粘贴了更多文本。
#slideShow_control figure {
background-color:red;
max-width:150px;
}
一个快速的解决方案是使框仅与图像一样宽,现在您必须弄清楚如何正确设置文本的位置 see here .
当使用这样的动画时,在相对父元素中使用绝对定位元素是可以的。试着弄清楚你要把鼠标悬停在谁身上,因为你实现它的方式有很多错误。
关于javascript - 如何在空白区域停用 css hover,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39554557/