javascript - 如何停用 css 悬停在空白区域

Question

我有这样的东西

我尝试将鼠标悬停在红色区域上，我可以将 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 解决方案。

Answer 1

非常长的文本使图形元素比图像更宽。看看这个小提琴，这样你就可以想象它。请注意第三个数字很大，因为我在其中复制并粘贴了更多文本。

#slideShow_control figure {
  background-color:red;
  max-width:150px;
}

一个快速的解决方案是使框仅与图像一样宽，现在您必须弄清楚如何正确设置文本的位置，请参见此处。

当使用这样的动画时，在相对父级中使用绝对定位元素是可以的。试着弄清楚你要把悬停设置在谁身上，因为你实现它的方式非常有问题。