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 containing img) particular class , set class's border-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

Popular posts from this blog

c++ - No viable overloaded operator for references a map -

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

java - Cannot secure connection using TLS -