悬停图标插入时

user596502 发表于 Dev

用户596502

是否可以在图标插入时添加悬停效果？我使用css进行图标插入。我的代码如下：

.icon-caret-down:before{
  content:"\f0d7";
  font-family:'fontawesome-alloy';
  speak:none;
  font-style:normal;
  font-weight:normal;
  font-variant:normal;
  text-transform:none;
  line-height:1;
  -webkit-font-smoothing:antialiased;
  vertical-align: baseline;
  background-position: 0 0;
  background-repeat: repeat;
  margin-top: 0; 
}

为了增加对悬停的效果，我尝试了但没用

.icon-caret-down:before:hover{
    color:red;
 }

HTML是：

<span id="idofspan" onclick="somefun()"><i class="icon-caret-down"></i></span>

谢谢

梦科技

您为什么使用:before它似乎无关紧要。只需添加:hover

.icon-caret-down:before{
  content:"▼";
  font-family:'arial';
  speak:none;
  font-style:normal;
  font-weight:normal;
  font-variant:normal;
  text-transform:none;
  line-height:1;
  -webkit-font-smoothing:antialiased;
  vertical-align: baseline;
  background-position: 0 0;
  background-repeat: repeat;
  margin-top: 0; 
}
.icon-caret-down:hover{
  color:red;
}

点击演示

:before使用时悬停:hover:before

.icon-caret-down:before {
    content:"\f0d7";
    font-family:'fontawesome-alloy';
    speak:none;
    font-style:normal;
    font-weight:normal;
    font-variant:normal;
    text-transform:none;
    line-height:1;
    -webkit-font-smoothing:antialiased;
    vertical-align: baseline;
    background-position: 0 0;
    background-repeat: repeat;
    margin-top: 0; 
    cursor:pointer;background:#27a7eb; color: #FFF; border-radius:50%; font-size:14px; height:auto;margin-left:5px;padding: 1px 4px; width:auto;
}
.icon-caret-down:hover:before {
    background:#b00;
}