HTML/CSS/JavaScript/jQuery - 點擊時保持懸停效果

爲了簡化我的代碼，我有一個容器div。在容器div裏面是一個img和一些帶有輸入的表單。當你將鼠標懸停在容器div上時，img消失（使用css修改可見性），顯示錶單。HTML/CSS/JavaScript/jQuery - 點擊時保持懸停效果

我基本上是有是這樣的：

HTML

<div class="container"> 
    <div class="img"><img src="/img/example.jpg"></div> 
    <div class="form"><form>...</form></div> 
</div>

CSS

.img { 
     opacity: 1; 
     transition: ease 0.3s; 
} 
.container:hover .img { 
     opacity: 0; 
    }

一旦.container:hover應用，如果被點擊的div.form form任何一部分，.container:hover風格丟失，也就是說，img會退回並隱藏表單。我可以點擊表單輸入框，但img仍然會淡入。如果我移動鼠標，則再次應用.container:hover，並且可以將我的文本輸入到框中。

我注意到的是，只有當我點擊我的筆記本電腦上的內置鼠標按鈕纔會發生這種情況。如果我使用外接鼠標或觸摸屏設備，則不會發生這種情況。我不知道如何解決這個問題。我只是希望能夠在沒有懸停風格丟失的情況下點擊表單。

來源

2017-06-16 HumptyDumpty

不知道爲什麼會出現這種情況，可以在我的桌面上工作，但是您在'img'標記中缺少關閉'''，並且您應該轉換'opacity'而不是'visibility' https://codepen.io/mcoker/pen/rwjVqN –

您使用的是什麼瀏覽器？ – elveti

有趣的是，使用完整的代碼來查看實際網頁會更有幫助嗎？如果是這樣，該網頁位於http://www.rofordaward.co.uk /nominate.php – HumptyDumpty

嘗試這樣的：

#No2 { 
visibility: hidden;

}

#No1:hover { 
background: red;

}

#No1:hover + #No2 { 
visibility: visible;

}

來源

2017-06-16 18:54:48 ABC

嘗試從你的瀏覽器中刪除緩存數據。有時會創造奇蹟！

來源

2017-06-16 19:14:16 Pugh

HTML/CSS/JavaScript/jQuery - 點擊時保持懸停效果

回答

相關問題