Chuyển đến nội dung chính
Text appears when hover over image by https://forums.digitalpoint.com/threads/text-appears-when-hover-over-image.570583/
Depends. If the image is a link too, easy:
HTML:
<a href="somewhere.com"><img src="beeld.gif" alt="somewhere.com" title="click here to go to somewhere.com" /></a>
In Internet Exploder, the ALT text shows on hover, which it's not
supposed to but oh well. The rest of the world shows TITLE text on
hover.
However, if you want text to appear when hovering over just anything, that's a whole other clue of yarn.
http://mikecherim.com/experiments/css_map_pop.php
I used it on a website here:
pizzaatje.nl > click on the scooter image at right, hover mouse over question marks.
(earlier it was a three-page steaming pile of Javascript... now it's a few CSS rules)
Ah, there is a third way I'd forgotten about.
You could have the text already under the image (or above... wherever),
but hidden by having the same colour as the background (the colour
around the image). On hover of the container with image and text, the
text could change colour and then of course it's visible.
Unfortunately, IE6 only hovers on links. You can Javascript your way out of that, and take PeterNed's and just stick it somewhere http://www.xs4all.nl/~peterned/htc/csshover2.htc .
HTML
<div class="imagehover">
<img src="somewhere.gif" height="100" width="100" alt="a picture of a walrus wallowing in the blood" />
<p>Here's some hidden text which shows when the container is hovered over</p>
</div>
Assuming the page's background is white:
CSS
.imagehover p {
color: #fff;
}
.imagehover p:hover {
color: #000;
}
The text goes from invisible white to visible black on hover of the
container. Be careful about google. Hidden text and links have been
abused by spammers so sometimes google thinks a site with hidden text
deserves a ban. As far as I know, it being visible on hover should make
that okay (I've done it several times for hidden skip links for da
blind).
Nhận xét
Đăng nhận xét