开发者

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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜