CSS Help Needed
- Started
- Last post
- 5 Responses
- mg33
I have the following CSS to control an image rollover effect, but it's causing a conflict with a span that occurs automatically in the WP theme. It's based on this example: http://codepen.io/wolfcry911/pen…
a span {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.6);
bottom: 0;
color: #696969;
display: none;
font-family: ColfaxWebBold;
left: 0;
padding-top: 80px;
position: absolute;
right: 0;
text-align: center;
top: 0;
}
a:hover span {
display: block;
}This is the HTML:
<div class="boxset drop-shadow lifted portfolio-horizontal">
<div id="sectionbg">
<a href="/pcategory/urbanarchitecture"><img class="fade" title="Urban and Architecture" alt="" src="url" />
<span>Name / Location</span>
</a></div>
</div>How can I rename that CSS so that it's applied to the <span>Name / Location</span> and only that span, and no other instance of a <span> that's wrapped in a link? I've never come across something as confusing as this, but maybe someone can point me in the right direction. Many thanks!
- dbloc0
give the span a class
- dbloc0
a.nameloc {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.6);
bottom: 0;
color: #696969;
display: none;
font-family: ColfaxWebBold;
left: 0;
padding-top: 80px;
position: absolute;
right: 0;
text-align: center;
top: 0;
}
a.nameloc:hover span {
display: block;
}This is the HTML:
<div class="boxset drop-shadow lifted portfolio-horizontal">
<div id="sectionbg">
<a href="/pcategory/urbanarchitecture"><img class="fade" title="Urban and Architecture" alt="" src="url" />
<span class="nameloc">Name / Location</span>
</a></div>
</div>
- dbloc0
actually I think I read it wrong try this:
#sectionbg a span {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.6);
bottom: 0;
color: #696969;
display: none;
font-family: ColfaxWebBold;
left: 0;
padding-top: 80px;
position: absolute;
right: 0;
text-align: center;
top: 0;
}
#sectionbg a:hover span {
display: block;
}
- mg330
Perfect! Thank you so much dbloc.
- IRNlun60
What dblock said... but you could also:
#sectionbg a > span
... but thats if you don't want to style spans within a span like so;
<span><span></span></span>