Question

我正在尝试为div创建一个悬停效果，其中包含font-awesome图标。我尝试用它来button，因为div没有href（＆＃34;链接＆＃34;实际上指向overlay），但这里也没有运气。那么如何在没有href的fa图标上创建悬停效果呢？

＆＃13;

.read-more i {
    padding: 5px 10px;
    display: inline-block;
    -moz-border-radius: 140px;
    -webkit-border-radius: 140px;
    border-radius: 100px;
    -moz-box-shadow: 0 0 2px #888;
    -webkit-box-shadow: 0 0 2px #888;
    box-shadow: 0 0 2px #888;
    background-color: #FFF;
    opacity:0.7;
    color: #888;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

    .read-more:hover {
    	color:#FFF;
    	background-color:#000;
    }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<a href="#" target="_blank">
    <div class="well carousel">
        <div class="product-detailscar">
            <div class="image-video-linkcar">
                <img alt="#" src="htpp://lorempixel.com/300/300">
                
                <div class="brandcar">
                  BRAND
                </div>
                <div class="categorycar">
                   CATEGORY
                </div>
                <div class="read-more">
                    <i aria-hidden="true" class="fa fa-file-text-o fa-2x"></i>
                </div>
            </div>
        </div>
    </div></a>

＆＃13;

Answer 1

尝试使用.read-more i:hover代替.read-more:hover

Answer 2

问题在于您将悬停样式应用于父元素而不是i：

.read-more i {
    padding: 5px 10px;
    display: inline-block;
    -moz-border-radius: 140px;
    -webkit-border-radius: 140px;
    border-radius: 100px;
    -moz-box-shadow: 0 0 2px #888;
    -webkit-box-shadow: 0 0 2px #888;
    box-shadow: 0 0 2px #888;
    background-color: #FFF;
    opacity:0.7;
    color: #888;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

    .read-more i:hover {
    	color:#FFF;
    	background-color:#000;
    }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="read-more">
  <i class="fa fa-file-text-o fa-2x" aria-hidden="true"></i>
</div>

Answer 3

要达到预期效果，请使用以下

.read-more i:hover {
    color:#FFF;
    background-color:#000;
}

http://codepen.io/nagasai/pen/mAVPBy

选项2：对于单个div

的情况

div i:hover {
    color:#FFF;
    background-color:#000;
}

http://codepen.io/nagasai/pen/ALEKVg

选项3：使用i类来达到预期效果

.fa-2x:hover {
    color:#FFF;
    background-color:#000;
}

http://codepen.io/nagasai/pen/gwPAZA

Answer 4

我不太确定你是否需要将这种悬停效果应用于包含图标的元素（即：按钮）或图标本身。因此，下面的代码片段演示了两个示例：

Icon Hover
按钮+图标悬停

.stand-alone-complex .fa {
  padding: 5px 10px;
  display: inline-block;
  -moz-border-radius: 140px;
  -webkit-border-radius: 140px;
  border-radius: 100px;
  -moz-box-shadow: 0 0 2px #888;
  -webkit-box-shadow: 0 0 2px #888;
  box-shadow: 0 0 2px #888;
  background-color: #FFF;
  opacity: 0.7;
  color: #888;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: .7s;
}
.stand-alone-complex .fa:hover {
  color: #FFF;
  background-color: #000;
}

.read-more {
    position: relative;
    min-height: 50px;
    padding: 10px;
    box-sizing: border-box;
    max-width: 150px;
    display: block;
    margin: auto;
    transition: .7s;
    border: 1px solid #ececec;
}

.read-more .fa {
  padding: 5px 10px;
  display: inline-block;
  -moz-border-radius: 140px;
  -webkit-border-radius: 140px;
  border-radius: 100px;
  -moz-box-shadow: 0 0 2px #888;
  -webkit-box-shadow: 0 0 2px #888;
  box-shadow: 0 0 2px #888;
  background-color: #FFF;
  opacity: 0.7;
  color: #888;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: .7s;
}
.read-more:hover {
  color: #FFF;
  background-color: #000;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<strong>Icon Hover</strong>
<div class="stand-alone-complex">
  <i class="fa fa-file-text-o fa-2x" aria-hidden="true"></i>
</div>
<hr>
<strong>Button Hover</strong>
<div class="read-more">
  <i class="fa fa-file-text-o fa-2x" aria-hidden="true"></i>
</div>

在div或按钮上创建悬停效果

4 个答案: