懸停CSS HTML上的文字后面圖片

Question

我正在嘗試使圖像顯示在文本后面作為懸停效果。

目前，它只是一個簡單的啟動頁面，但是我似乎無法弄清楚如何使其工作。

這是當前頁面。 徽標下方的文字是鏈接。 https://gyazo.com/8fac5b310ed8febd80032cc19b57d76e

這是用戶懸停時我想要在文字后面顯示的圖像。 https://gyazo.com/67852dd57789458942952b1dd3b3cb55

就像不同顏色的塗鴉效果一樣。 它們不會全部顯示在一個單詞上，而是懸停在每個單詞后面的另一個單詞。

這是html：

<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,800,600,300' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title>Lira.net</title>
<link rel="stylesheet" href="css/style.css">
<script src="script.js"></script>
</head>
<body>
<div id="middlegroup">
<div id="topimage">
<img src="images/LiraLogo325.png">
</div>
<div id="links">
     <p>
        <a href="#">Liquidation</a> -
        <a href="#">Monetization<a> -
        <a href="#">Brokerage</a>
     </p>

</div>
</div>
</body>
<footer>
<p>&copy; 2016 Lira.net </p>
</footer>
</html>

這是CSS：

h1 {
font-family: "Open Sans" , serif; 
color: #FFFFFF;
text-shadow: 2px 2px 3px #4d4d4d;
font-size: 5vw;
text-align: center;
}

body {
margin: 0;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}

#topimage{
width: 100%;

text-align:center;
size: 1vw;
}
#links{
width: 100%;
list-style-type:circle;
}
#middlegroup{
width:600px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-125px 0 0 -300px;
}
a:link{
color:#01197d;
text-decoration: none;
}
a:visited{
color:#01197d;
text-decoration: none;
}
a:hover{
text-decoration: none;

}
a:active{
color:#01197d;
text-decoration: none;
}
p {
font-family: "Open Sans" , serif;
font-weight: 600;
font-size:15px;
text-align:center;
}
ul {
font-family: "Open Sans" , serif;
font-weight: 400;
font-size:20px;
text-align:center;
list-style-type:circle;
}
footer p{
font-family: "Open Sans" , serif;
font-weight: 400;
font-size:14px;
position:absolute;
bottom:0;
width:100%;
height:60px;   /* Height of the footer */

}

任何幫助將不勝感激！

Answer 1

完成此操作的最簡單方法是使用背景圖片，您可以嘗試執行以下操作：

.class1:hover {
background-image: url("paper.gif");
}
.class2:hover {
background-image: url("paper.gif");
}
.class3:hover {
background-image: url("paper.gif");
}

只需將類名替換為適合您的鏈接的類名，然后明顯調整大小即可，例如對鏈接顯示inline-block就足夠了。 在這里，您擁有完成此任務所需的一切

Answer 2

您只需要在懸停時添加背景圖片即可。 這是一個小提琴： https : //jsfiddle.net/rd7zbytc/

這是代碼：

#links p a:hover {
    background-image:url("https://images.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
    background-size:100px;
}

Answer 3

這是你在說什么嗎？

http://codepen.io/xkurohatox/pen/qbPXOb

HTML更改：

 <div id="links">
 <p>
    <a id="a1" href="#">Liquidation</a> -
    <a id="a2" href="#">Monetization<a> -
    <a id="a3" href="#">Brokerage</a>
    </p>

 </div>

CSS更改：

#a1:hover {
background-image:url("http://previews.123rf.com/images/pzaxe/pzaxe1104/pzaxe110400016/9242659-Seamless-monochrome-square-texture-scribble--Stock-Vector-pattern- scribble-background.jpg");
 background-size:100%;
}
#a2:hover {
background-image:url("http://st.depositphotos.com/1466799/1121/v/950/dep_11211843-Full-color-abstract-scribble-background.jpg");
 background-size:100%;
}
 #a3:hover {
  background-image:url("http://thumbs.dreamstime.com/z/child-scribble-12020973.jpg");
 background-size:100%;
}
/* images above are not my own and only being used for demo purposes */

希望這可以幫助！

懸停CSS HTML上的文字后面圖片

問題描述

3 個解決方案

解決方案1
1 2016-01-15 23:09:38

解決方案2
1 2016-01-15 23:10:13

解決方案3
0 2016-01-15 23:11:58

懸停CSS HTML上的文字后面圖片

問題描述

3 個解決方案

解決方案1 1 2016-01-15 23:09:38

解決方案2 1 2016-01-15 23:10:13

解決方案3 0 2016-01-15 23:11:58

解決方案1
1 2016-01-15 23:09:38

解決方案2
1 2016-01-15 23:10:13

解決方案3
0 2016-01-15 23:11:58