Create hover effect on a div or button

Question

I am trying to create a hover-over effect for a div with a font-awesome icon inside. I tried making a button out of it also because the div doesnt have a href (the "link" actually points to an overlay ), but here also no luck. So how to create a hover-over effect on a fa icon that has no 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 { color:#FFF; 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

试试.read-more i:hover而不是.read-more:hover

Answer 2

The problem is that you are applying the hover styling to the parent element instead of the 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

To achieve expected result, use below

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

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

Option 2: For this case with single div

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

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

Option 3 : Use class of i to achieve expected result

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

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

Answer 4

I'm not too sure if you need this hover effect applied to the element containing the icon (ie: a button) or the icon itself. So the code snippet below demonstrates both examples:

1. Icon Hover
2. Button + 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>