javascript - Remove a:hover from linked images -
i'm desperate , can't find solution despite of searching www dozens of hours.
for text links, have added following css code:
a:hover img { border-bottom: none !important; }
unfortunately adds thick black underline on linkable imgs somehow ruins of entire site.
how remove border-bottom on linkable imgs when hovered using css?
i've tried following codes without being able fix issue:
a img, a:hover img { border-bottom: none !important; text-decoration: none !important; }
so far nothing worked out!
any regarding issue highly appreciated. know it's small detail – me means whole world.
many in advance!
for better understanding please have at:
http://www.huberthasler.de/works
the logo on left fold out menu affected well.
best wishes
m
your problem that
a:hover { border-bottom: 3px solid #000; }
adds border a
elements on hover css rules have in question remove border img
elements descendent a
/a:hover
elements. since img
elements never had border, doesn't , border on a
surrounding image stays.
seeing have class="thumb-wrap"
on main images, perhaps consider a.thumb-wrap:hover { border-bottom: none; }
if need more general solution, want to
- tag image links (
a
elements containingimg
) particular class , set class'sborder-bottom: none;
- tag text links , set class's
border-bottom: 3px solid #000;
- use javascript dynamically apply styles. using jquery:
$('a').has('img').css('border-bottom', 'none')
Comments
Post a Comment