懸停效果範圍太高

嘿，我做了一個小的懸浮效果，但存在一個bug，我似乎不能夠通過自己刪除，所以希望有人能幫助我:(懸停效果範圍太高

[here]https://jsfiddle.net/5a4jh4pc/

這是懸停效果。

懸停寬度未佈置於圖像尺寸的100％
懸停效果甚至開始如果你接近右側的圖像（它應該只做當鼠標在圖像上，而不是旁邊的效果）

我希望有人可以幫助我在這裏解決這個問題。提前致謝！

來源

2016-09-14 kazaam00nix

您的容器設置爲特定大小，其中hover效果被觸發，圖像設置爲70％。

這意味着您有30％的容器在右邊仍然激活hover，但不包含圖像。

更改figurewidth，以滿足您的需求

figure { 
display: inline-block; 
    position: relative; 
    float: left; 
    overflow: hidden; 
    width: 300px; 
} 
figcaption { 
    position: absolute; 
    background: black; 
    background: rgba(0,0,0,0.75); 
    color: white; 
    opacity: 0; 
    -webkit-transition: all 0.6s ease; 
    -moz-transition: all 0.6s ease; 
    -o-transition:  all 0.6s ease; 
     font-size: 12px; 
    line-height: 15px; 
} 
figure:hover figcaption { 
    opacity: 1; 
} 
figure:hover:before { 
    opacity: 0; 
} 
.cap-bot img { 
    float:left; 
width:100%; 
} 
.cap-bot:before { width:0%;padding: 10px 10px;bottom: 10px; } 
.cap-bot figcaption { width:100%;padding: 10px 10px;left: 0; bottom: -30%;} 
.cap-bot:hover figcaption {width:100%;padding: 10px 10px;bottom: 0; }

叉形https://jsfiddle.net/hjhbrosh/

來源

2016-09-14 09:33:19

嘿謝謝你這個工作。如果我想添加多個圖像並且填充10px，那麼這是可能的嗎？因爲當我嘗試它時，懸停窗口也變得更寬和更寬。 – kazaam00nix

這取決於你想要達到的目標。你可以使用'box-sizing：border-box;'來包含懸停區域的大小來抑制填充？ –

以及我想要做的是每個團隊成員的圖像和關於它的某些文本的「團隊頁面」。您在上面發佈的修改後的css代碼有助於解決效果問題。但如果我現在添加所有圖像（其中8個），它們基本上粘在一起。會不會有辦法讓他們離開彼此呢？ – kazaam00nix

拆下左，右填充在figcaption，並使用word-wrap: break-word;到文本換到下一行，當它溢出，並使用div裏面你的figcaption保留該填充。

.cap-bot figcaption { 
    width:70%; 
    padding: 10px 0px; 
    left: 0; 
    bottom: -30%; 
} 
.cap-bot:hover figcaption { 
    width:70%; 
    padding: 10px 0px; 
    bottom: 0; 
}

入住這fiddle

來源

2016-09-14 09:35:19

懸停效果範圍太高

回答

相關問題