I've searched other questions, and the solutions I've found don't work.
Here's the deets: Webpage has a .side_nav . There are 4 elements to that . Each has a small img, an h2, and a p.
I'd like for the links to have a lighter color when hovered. I feel as if I'm missing something small...
I'm using DW:CC, and interestingly enough, it does not show the normal background in the in "Live" view. It does, however, show the :hover action in "Live" view, just not in any of the browsers I've tried.
HTML:
<nav class="fluid side_nav">
<div> <a href="#"> <img src="images/images.jpg" alt=""/>
<h2>Estimates</h2>
<p>Click here for an estimate</p>
</a></div>
<div> <a href="#"> <img src="images/images.jpg" alt=""/>
<h2>Repairs</h2>
<p>Click here for an estimate</p>
</a></div>
<div> <a href="#"> <img src="images/images.jpg" alt=""/>
<h2>Maintenance</h2>
<p>Click here for an estimate</p>
</a></div>
<div> <a href="#"> <img src="images/images.jpg" alt=""/>
<h2>Specials</h2>
<p>Click here for an estimate</p>
</a></div>
</nav>
Then, the CSS:
.side_nav {
clear: both;
margin-top: 10px;
margin-bottom: 10px;
}
.side_nav img {
height: 35px;
padding-right: 15px;
float: left;
}
.side_nav a {
display: block;
border: 1px solid #151515;
margin-bottom: 8px;
border-radius: 8px;
padding-top: 8px;
padding-right: 8px;
padding-bottom: 8px;
padding-left: 8px;
-webkit-box-shadow: 4px 2px 6px #8E8E8E;
box-shadow: 4px 2px 6px #8E8E8E;
background-image: -webkit-linear-gradient(0deg,rgba(40,121,216,1.00) 0%,rgba(25,77,138,1.00) 99.48%);
background-image: -moz-linear-gradient(0deg,rgba(40,121,216,1.00) 0%,rgba(25,77,138,1.00) 99.48%);
background-image: -o-linear-gradient(0deg,rgba(40,121,216,1.00) 0%,rgba(25,77,138,1.00) 99.48%);
background-image: linear-gradient(90deg,rgba(40,121,216,1.00) 0%,rgba(25,77,138,1.00) 99.48%);
color: #FFFFFF;
}
.side_nav a:hover {
background-color: #3374C2;
}
Any tips?
You have background-image
already set, which supercedes color. Change the your CSS to just use background
:
.side_nav a:hover {
background: #3374C2;
}
Write:
.side_nav a:hover {
background: #3374C2; //background instead of background-image
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.