Show div on hover span styling
The title may be a bit misleading.
http://jsfiddle.net/whb8A/
I have a h3 element inside a span tag and of course it shouldn't go there, however I cannot seem to style the spanned text in the div in the manner I want.
If you hover over the image in the jsfiddle, the hidden div is shown and that is exactly what I want it to look like but if I take the h3 tag away from the text I can't seem to style it with CSS.
Should I be looking at a Jquery alternate? If so any tutorials of guides would be great, thanks
UPDATE: Thanks for all the help so far but I don't think I've explained very well.
http://imageshack.us/photo/my-images/827/examplewc.jpg/
The left side is how I would like it to be styled however removing the h3 tags and removing h3 from the class .info causes it to be styled as on the r开发者_JAVA百科ight side. It's the border width, postion and padding I am concerned about the most
Another solution is to put the text style definitions directly under the <a>
tag, so as to override the default anchor tag styling. Example:
.featured a {
color: #fff;
text-transform: uppercase;
}
If anyone is interested I solved the problem.
Instead of using the h3 tags and a span, I removed both and instead put a div inside the div that appeared on hover. You can see what I mean in the below fiddle. Now validates in html5 which is what I was after, thanks for all the help
http://jsfiddle.net/whb8A/62/
All I see when I drop the <h3>
tag is a loss of margin around the text. If you want that back, simply replace the <h3>
with a <span>
, change the CSS to match that instead of the h3
and add display: block
to the rule.
You have this near the end of your CSS:
.item a:hover .info {
display: block;
position: absolute;
bottom: 10px;
left: 30px;
width: 250px;
margin: 0;
padding: 10px;
background: #000;
}
This will select all .info
elements inside of hovered a
tags inside of a .item
element, but in your HTML you have no .item element
Remove .item
from the CSS and all is well when you remove the H3
精彩评论