Question

How can I put background image when I hover a link

<html>
    <head> </head>
    <body>
         <a href="#">Insert Bg in this a when hover</a>
    </body>
</html>

Answer 1

您需要将锚标记的显示属性设置为阻止，并为其填充背景高度。

HTML：

<html>
 <head> </head>
 <body>
     <a href="#">Insert Bg in this a when hover</a>
 </body>
</html>

CSS：

a{
 display : block;
 height : 100px;
}

a:hover{
 background : url('http://i.giphy.com/xUySTCEXzJdGCeIj3W.gif');
}

Answer 2

使用css :hover psudo-class选择器并设置background-image属性。

a:hover {
  background-image : url(img.png);
}

＆＃13;

a:hover {
  background-image : url(https://placehold.it/100x15);
}

＆＃13;

<html>
    <head> </head>
    <body>
         <a href="#">Insert Bg in this a when hover</a>
    </body>
</html>

＆＃13;

Answer 3

试试这个CSS

a:hover {
        background: url("http://wallpaper-gallery.net/images/grey-wallpaper-hd/grey-wallpaper-hd-23.jpg");  
       //Replace the URL with the desired image you want as a Bg
}

<html>
    <head> </head>
    <body>
         <a href="#">Insert Bg in this a when hover</a>
    </body>
</html>

如何将背景gif放入<a> link when hover

3 个答案: