Question

我在元素上设置了背景图像。当我在悬停时使用css方法通过JQuery更改元素的不透明度时，背景图像消失了！是什么赋予了？这是codepen上的示例：

CSS

li{
    background-image:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-checkmark-circled-32.png);
    background-repeat: no-repeat;
    background-position: center center;
}

li img{
    z-index:-1;
    position:relative;
}

JQuery的

$("li").hover(function(){
    $(this).css("opacity", 0.8);
}
)

http://codepen.io/rimager/pen/LAfJy/

Answer 1

这是一个使用您的代码进行一些修改的工作示例...

http://codepen.io/anon/pen/jsicb 1

HTML

<ul>
  <li><img src="https://farm8.staticflickr.com/7014/6741363919_3e0580543e_q.jpg" width="150" height="150" alt="Claude Monet - Bordighera  - 1883"></li>
  <li><img src="https://farm3.staticflickr.com/2366/2555929697_00046ed797_q.jpg" width="150" height="150" alt="Claude Monet - Orchard in Bloom"></li>
  <li><img src="https://farm4.staticflickr.com/3427/3750216840_feefcd6e17_q.jpg" width="150" height="150" alt="Monet, &quot;Impression, Sunrise&quot;"></li>
</ul>

CSS

li{
  float:left;
  margin:20px;

  opacity: 1;
  position: relative;
}
li::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 30px;
  margin-top: -16px;
  margin-left: -16px;
background:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-checkmark-circled-32.png) no-repeat center center transparent;  

}

li img{
  z-index:-1;
  position:relative;
}

/*
li:hover{
  opacity:0.8;
}
*/

现在，如果您想使用悬停状态而不使用javascript或jquery来应用相同的不透明度选项，请告诉我，我将在此处发布修改后的源代码。

Answer 2

这是另一个工作示例：

<强> HTML

<ul>
  <li id="item1"><img id="img1" src="https://farm8.staticflickr.com/7014/6741363919_3e0580543e_q.jpg" width="150" height="150" alt="Claude Monet - Bordighera  - 1883"></li>
  <li id="item2"><img id="img2" src="https://farm3.staticflickr.com/2366/2555929697_00046ed797_q.jpg" width="150" height="150" alt="Claude Monet - Orchard in Bloom"></li>
  <li id="item3"><img id="img3" src="https://farm4.staticflickr.com/3427/3750216840_feefcd6e17_q.jpg" width="150" height="150" alt="Monet, &quot;Impression, Sunrise&quot;"></li>
</ul>

<强> JS

$("#item1").hover(function(){


 $("#img1").css("opacity", 0.8);
  },
  function(){
  $("#img1").css("opacity", 1);
  }
)
$("#item2").hover(function(){
  $("#img2").css("opacity", 0.8);
  },
  function(){
  $("#img2").css("opacity", 1);
  }
)
$("#item3").hover(function(){
  $("#img3").css("opacity", 0.8);
  },
  function(){
  $("#img3").css("opacity", 1);
  }
)

<强> DEMO

通过JQuery的css方法设置元素的不透明度会删除背景图像

2 个答案: