Question

我想为我的网站图片添加悬停效果。我的照片在

中，无法添加此效果。代码：

    <ul class="grid">

        <li class="small" style="background-image: url(https://s30.postimg.org/b5q9obsxd/IMG_6050_copy.jpg);"></li>
        <li class="large" style="background-image: url(https://s24.postimg.org/mpyapvjz9/IMG_4995_copy.jpg);"></li>

Answer 1

使用li:hover在悬停时应用CSS。

li:hover {
  background-color: blue;
  color: white;
}

<ul>
  <li>LI</li>
  <li>LI</li>
  <li>LI</li>
  <li>LI</li>
</ul>

Answer 2

使用悬停如下：

li:hover{
 background-color: #C8E7F1;
}

Answer 3

检查悬停效果示例。

＆＃13;

.grid {
  list-style: none;
}
.grid li {
  opacity: 1;
  float: left;
  height: 300px;
  width: 50%;
  -webkit-transition: opacity 0.3s ease-in-out 0s;
  -moz-transition: opacity 0.3s ease-in-out 0s;
  -ms-transition: opacity 0.3s ease-in-out 0s;
  -o-transition: opacity 0.3s ease-in-out 0s;
  transition: opacity 0.3s ease-in-out 0s;
}
.grid li:hover {
  opacity: 0.80;
}

＆＃13;

<ul class="grid">

  <li class="small" style="background-image: url(https://s30.postimg.org/b5q9obsxd/IMG_6050_copy.jpg);"></li>
  <li class="large" style="background-image: url(https://s24.postimg.org/mpyapvjz9/IMG_4995_copy.jpg);"></li>
</ul>

＆＃13;

Html中的悬停效果

3 个答案: