Создайте эффект зависания на div или кнопке

Question

Я пытаюсь создать эффект зависания для div с шрифтом-удивительным значком внутри. Я попытался сделать button из этого также потому, что у div нет href («ссылка» на самом деле указывает на overlay), но здесь также не повезло. Итак, как создать эффект зависания на иконке fa, которая не имеет href?

.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 { 
 
    \t color:#FFF; 
 
    \t background-color:#000; 
 
    }

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

Answer 1

Проблема заключается в том, что вы применяете парения стиль к родительскому элементу вместо 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 { 
 
    \t color:#FFF; 
 
    \t 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 2

Попробуйте .read-more i:hover вместо .read-more:hover

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

Я не слишком уверен, что если вам нужен этот эффект парения, приложенный к элементу, содержащему значок (т.е. кнопка) или самой иконкой. Таким образом, фрагмент кода ниже демонстрирует оба примера:

1. Иконка Hover
2. Кнопка + Иконка 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>