比方說,我有一隻狗的形象。當用戶懸停在圖像上時,我該如何製作圖像,圖像消失,而是帶有「樹皮」的h1標籤?當鼠標懸停標籤時,如何將標籤更改爲不同的標籤?
0
A
回答
0
也許此代碼段可以是一個解決辦法
<html>
<head>
\t <style>
\t \t #wrap {
\t \t \t width: 128px;
\t \t \t height: 128px;
\t \t \t border: 2px solid black;
\t \t \t display: inline-block;
\t \t \t position: relative;
\t \t }
\t \t #img {
\t \t \t width: 128px;
\t \t \t position: absolute;
\t \t \t z-index: 2;
\t \t \t top: 0;
\t \t \t transition: all 0.3s ease-in-out 0s;
\t \t }
\t \t #img:hover {
\t \t \t opacity: 0;
\t \t }
\t </style>
</head>
<body>
<div id="wrap">
\t <h1>Bark!</h1>
\t <img id="img" src="https://www.iconexperience.com/_img/o_collection_png/green_dark_grey/256x256/plain/dog.png">
</div>
</body>
</html>
0
也許此代碼段可以指向你在正確的方向:
<html>
<head>
<style>
img, h1 {
transition: all 0.3s ease-in-out 0s;
}
h1 {
display: none;
}
img:hover + h1 {
display: block;
}
h1:hover + img {
display: none;
}
img:hover {
display: none;
}
</style>
</head>
<body>
<div>
<img src="http://i.imgur.com/jsdLHHv.png" />
<h1>Bark</h1>
</div>
</body>
0
這裏是一個非常簡單的例子。應該是不言自明的:
dog-barking-tag {
display: none;
}
parent:hover dog-barking-tag {
display: inline; /* or any other display value you need */
}
parent:hover dog-image-tag {
display:none;
}
<parent>
<dog-barking-tag>
<::barking tag:: />
</dog-barking-tag>
<dog-image-tag>
<dog image tag />
</dog-image-tag>
</parent>
的 「替代品」 是在parent:hover
完成。
0
您可以通過不同的方法實現此目的。對於我下面關於懸停在容器上的示例,它會更改「可見性」屬性。請參閱以下示例代碼。
.animal-cont{
\t \t \t width: 16%;
height: 120px;
border: 3px #ddd solid;
position: relative;
cursor: pointer;
\t \t }
h1 {
left: 50% ;
top: 50%;
transform: translate(-50%,-50%);
margin: auto;
\t \t \t position: absolute;
visibility: hidden;
color: #843f15;
\t \t }
img {
max-width: 100%;
}
.animal-cont:hover > img {
\t \t \t visibility: hidden;
\t \t }
.animal-cont:hover > h1 {
\t \t \t visibility: visible;
\t \t }
<div class="animal-cont">
\t <h1>Bark!</h1>
\t <img id="img" src="">
</div>
+0
謝謝。這一個運作良好。 – Miguel
相關問題
- 1. 將鼠標懸停在標籤上時更改標籤的前部顏色
- 2. jQuery的標籤:鼠標懸停
- 3. 在GWT,改變標籤的背景,當鼠標懸停
- 4. 使用Javascript將所有span標籤更改爲標籤標籤?
- 5. CSS在引導標籤控件上懸停標籤時改變標籤
- 6. 將鼠標懸停在標籤改變矩形背景漸變
- 7. 懸停在標籤上時,鼠標指針變爲
- 8. 懸停模式下的標籤,同時鼠標懸停在下拉菜單上
- 9. 鼠標懸停時獲取任何標籤的ID
- 10. 當爲...提供id時,停止在輸入標籤上懸停輸入標籤
- 11. 如何更改鼠標懸停在JtabbedPane上的標籤文本的顏色?
- 12. 當鼠標懸停時,獲取標籤,標識,對象的類別
- 13. 觸發警報,當鼠標懸停到browswe標籤
- 14. 其他標籤更改時如何更改標籤?
- 15. 如何將輸入標籤更改爲textarea標籤
- 16. 將鼠標懸停在選擇標籤中的選項
- 17. 將鼠標懸停在chart.js上的格式X標籤
- 18. 如何更改此代碼以使鼠標懸停在標籤上?
- 19. 如何將光標懸停在標籤上時將其改變爲手形?
- 20. 當鼠標懸停在TreeNode上時,如何更改光標?
- 21. GTK +:鼠標懸停在按鈕上時顯示標籤
- 22. 如何將標準文本標籤轉換爲懸停按鈕?
- 23. 當我們將鼠標放在該標籤上時,如果我們設置了標題屬性,然後它將顯示其值,那麼當我們將鼠標懸停在任何html標籤(如錨標籤,img標籤等)上時,將更改img標籤的標題屬性風格
- 24. 在鼠標懸停上更改標籤前景,但標籤位於按鈕內容的內部
- 25. 更改標籤
- 26. 更改標籤
- 27. 更改標籤
- 28. 更改標籤
- 29. 如何更改懸停在div標籤內的標誌符號圖標顏色?
- 30. 屬性更改標籤顏色標籤
你可以有一個div容器,它裏面有兩個div的圖像和文字。根據您的需要顯示/隱藏。這是想法,你可以分享一些更好的幫助 – tech2017
重疊文字上的圖像,然後在圖像上隱藏它的懸停風格。 – 4castle
@techLove我從來沒有真的這樣想過。我會試試看看它是如何發展的。 – Miguel