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类，你想要解决问题的样式就解决了

<强> 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 hover，

df.groupby('keys')['values'].agg(['sum', 'mean']).reset_index()
#  keys sum mean
#0    1   1  1.0
#1    2   5  2.5
#2    3  22  5.5

新：

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

检查更新后的fiddle

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

2 个答案: