Question

鼠标悬停在（悬停）\

上时，将图像置于文本顶部的简便方法是什么？

我这样做但是没有用。

.nav-justified li:hover>a
{
    background:url(../images/circle-hover.png) center no-repeat;
    padding-bottom:-50px !important;
}

HTML

<nav id="topNav" role="navigation" aria-label="Top Navigation">
  <ul class="nav nav-justified">  
    <li><a href="#">Home</a></li> 
  </ul> 
</nav>  

  O (circle-hover)
 LINK

Answer 1

为background-image使用：pseudo-element，并为其设置更高z-index: 1。

.nav-justified li:hover > a:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../images/circle-hover.png) center no-repeat;
    z-index: 1;
}

演示：

a {
  position: relative;
}
a:hover:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(http://lorempixel.com/30/10);
  z-index: 1;
}

<a href="#">Link</a>

Answer 2

您可以使用jQuery .hover。确保将HER URL替换为图像文件的路径。

＆＃13;

$(document).ready(function(){
    $(".box").hover(function(){
        $(this).css("background-image", "url(ENETR URL HERE)");
    },
    function(){
        $(this).css("background", "#FFF");
    });
});

＆＃13;

.box{
  width:200px;
  height:200px;
  border: 1px solid black;
}

＆＃13;

<html>

<head>

  <link rel="stylesheet" href="css/style.css">


</head>
<body>


  <div class="box">
    
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="js/script.js"></script>



</body>
</html>

＆＃13;

如何为图像添加边距/填充：悬停

2 个答案: