html - 如何禁用图像链接上的悬停效果

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 适用于您的 div 容器中的所有链接，如果您专门为您的链接设置了一个 CSS 类，您的问题就解决了

HTML

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;
}

工作 fiddle :https://jsfiddle.net/25wqoxn0/1/