如何取消激活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

真正長的文字使圖形元素比圖像更寬。看看this fiddle，這樣你就可以看到它。注意第三個數字很大，因爲我在那裏複製並粘貼了更多文本。

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

一個快速的解決方案是讓箱子只寬您的圖像，現在你必須弄清楚如何正確設置文本的位置see here。

使用這樣的動畫時，在相對父母內使用絕對定位元素是可以的。試圖找出你要設置懸停的人，因爲你實施它的方式很麻煩。