html - Add Visibility:Hidden effect and keep <a href> download ability -
my situation bit tricky , hard explain, can clearly.
on website need click on , downloads image, object click on must allow :hover
psuedo class change image on :hover
.
how i've set follows:
if remove visibility:hidden
html, image appears , browsers' download function becomes available. can choose image img src=
is, adding visibilty:hidden
disable download
ability.
to reiterate - need you hover on prof_wl_btn
, downloads <a>
's href=...
image , on hover/mouseover prof_wl_btn changes it's background position (so far using psuedo class).
possible methods
1: use javascript onmouseover , z-index, can't z-index work here...
2: tried using css attribute clip:rect(xpx,xpx,xpx,xpx);
crops everything.
if unclear i'm sorry, hard explain! can't find other post this.
ok rewrite, since op clarified in comments.
you can either have background image shifts on :hover, or if image must in html can indeed move on :hover of parent, if wanted alt text show won't happen here.
<a href="downloadlink"><img src="someiimg" alt="download ze image, yes"></a>
make 1 large image (someimg) showing both states (normal/hover). can top bottom or side-to-side. top-bottom. let's image want show w 40px h 40px. new sprite image showing both states, if top-bottom, w 40px h 80px;
- set anchor block context (display: block, float, whatever).
- set height , width on teh anchor equal amount of image want viewer see (so in case, width , height of anchor 40px).
- set anchor overflow hidden. should see 40 x 40 part of image want users see before anything.
you can either set anchor position:relative , img position: absolute, or leave them , use negative margins (you'll have make img in block context this). let's latter:
a img { display: block; }
a:hover img, a:focus img { margin-top: -40px; }
because anchor has overflow hidden, you'll still see 40 x 40 window of image, see bottom part. bonus keyboard working there too.
if want use positioning, you'd relative-position anchor, absolute-position img, set image in normal state top: 0 , left: 0, , on hover/focus of image set top: -40px;
Comments
Post a Comment