Question

是否可以为icon-caret-down添加onhover效果？我使用css for icon-caret down。我的代码如下：

.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>

由于

Answer 1

您不需要在那里使用:before伪选择器：

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

Answer 2

如果您只想更改图标，请在悬停后放置“之前”伪标记：

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

如果您想要更改整个项目，只需删除：之前

JSfiddle here

Answer 3

为什么使用: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;
}

CLICK FOR DEMO

使用: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;
}

CLICK FOR DEMO

Answer 4

要在css中使用悬停启用

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

}

注意：之前是更多的选择器转到

http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_before_style

在悬停icon-caret-down

4 个答案:

CLICK FOR DEMO

CLICK FOR DEMO