Having an issue with my CSS.
For instance, here is a snippet from my CSS file
.readmore {
font-style: italic;
text-decoration: none;
color: #509743;
padding-left: 15px;
background: url(../images/more.png) no-repeat 0 50%;
}
.readmore:hover{
color: #c8c8c8;
}
Although the code looks fine in the CSS file, it doesn't work when called from the HTML file. But if I duplicate the CSS code directly into the HTML file, it works perfectly.
This is the HTML code that works
<div class="col-xs-2 col-md-4" style="position:relative; top:20px; margin-left:10px;">
<div class="thumbnail">
<div class="caption">
<h4>A propos de <strong><span style="color:#509743;">L'agence</span></strong></h4>
<img src="images/logo_agence.gif"/><br><br>
<p><a href="#" class="readmore">...</a></p><br><br>
</div>
</div>
</div>
However, I find this approach unprofessional and aesthetically unpleasant.
<div class="col-xs-2 col-md-4" style="position:relative; top:20px; margin-left:10px;">
<div class="thumbnail">
<div class="caption">
<h4>A propos de <strong><span style="color:#509743;">L'agence</span></strong></h4>
<img src="images/logo_agence.gif"/><br><br>
<p><a href="#" style="
font-style: italic;
text-decoration: none;
color: #509743;
padding-left: 15px;
background: url(images/more.png) no-repeat 0 50%;
hover{
color: #c8c8c8;
}">...</a></p><br><br>
</div>
</div>
</div>
The hover effect doesn't seem to be functioning correctly.
Appreciate any help you can provide. Thank you.