Как отключить эффект зависания на ссылке изображения

Question

Может кто-нибудь понять, почему цвет фона для моих текстовых ссылок появляется на моих ссылках на изображения, несмотря на все мои усилия по его отключению?

Я сделал Fiddle

<div class="pink"> 
    <p> 
    The <a href="#" target="blank">link</a> 
    </p> 
    <a class="imagelink nohover" href="#" target="_blank"> 
    <img src="http://www.royalcanin.ca/~/media/Royal-Canin-Canada/Product-Categories/cat-adult-landing-hero.ashx" alt="image" style="max-width:476px;max- height:275px;border:0;"> 
    </a> 
</div> 

CSS

.pink { 
    background-color: pink; 
} 

.pink a { 
    color: white; 
} 

.pink img a:hover { 
    background-color: transparent !important; 
} 

.imagelink:not(.nohover):hover{ 
    background-color: transparent !important; 
} 

.pink a:hover { 
    text-decoration: none; 
    color: white; 
    background-color: blue; 
} 

Answer 1

Проблема в том, что .pink a:hover распространяется на все ссылки в вашем сНу контейнере, если установить класс CSS специально для Вашей ссылки вы хотите, чтобы ваша проблема была решена

HMTL

The <a href="http://www.onthehouse.com.au/" target="blank" class="style-only-this">link</a> 

CSS

.pink .style-only-this:hover { 
    text-decoration: none; 
    color: white; 
    background-color: blue; 
} 

Работа скрипка: https://jsfiddle.net/25wqoxn0/1/

Answer 2

Я заменил Css парить, написанные для изображения,

.imagelink:not(.nohover):hover{ 
    background-color: transparent !important; 
} 

Новый:

.imagelink.nohover:hover{ 
    background: transparent; 
} 

Проверьте обновленные версии fiddle