Question

我正在尝试设置一些子类别链接，以便整个背景充当链接，当悬停时将黄色背景上的黑色文本转换为黑色背景上的白色文本。

网站https://www.toys4cars.co.uk/bmw-roof-racks.html

h2.product-name2 {
  background-color: #FFE51E;
  border-radius: 10px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  color: #000;
}
.product-name2:hover {
  background-color: #000;
  border-radius: 10px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  color: #fff;
  display: block;
}

<h2 class="product-name2">
    <a href="http://www.toys4cars.co.uk/bmw-1-series-roof-racks.html" title="1 Series" class="product-image"></a>
    <a href="http://www.toys4cars.co.uk/bmw-1-series-roof-racks.html" title="1 Series">1 Series</a>
</h2>

请问如何完成这项工作。

由于

Answer 1

在检查时尝试这似乎可以解决问题：

h2.product-name2 a {
   display: block;
}

Answer 2

＆＃13;

h2.product-name2 {
  background-color: #FFE51E;
  border-radius: 10px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.product-name2:hover {
  background-color: #000;
  border-radius: 10px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  display: block;
}
h2.product-name2 a {
  display: block;
  color: #000;
  text-decoration: none;
}
h2.product-name2:hover a {
  color: #fff;
}

＆＃13;

<h2 class="product-name2">
    <a href="http://www.toys4cars.co.uk/bmw-1-series-roof-racks.html" title="1 Series">1 Series</a>
</h2>

＆＃13;

这里的关键变化是1）使锚点块级别，2）删除冗余锚标记，3）设置锚点上的颜色而不是标题。

Answer 3

我写了一个快速jsFiddle来突出我在网站上看到的动态变化，我会详细说明，所以请随时提出更多问题。

HTML

<div>
    section 1
</div>
<div>
    section 2
</div>
<div>
    section 3
</div>
<div>
    section 4
</div>
<div>
    section 5
</div>

CSS

div {
    display: inline-block;
    background-color: yellow;
    width: 100px;
    height: 60px;
    text-align: center;
    font-size: 16px;
    line-height: 60px;
    margin: 2px 0;
}

div:hover {
    background-color: black;
    color: white;
}

Answer 4

在整个背景悬停时定位你的锚点。

h2.product-name2:hover a {
    color: white;
}

样式链接与悬停状态背景更改

4 个答案: