html - 悬停时 <strong> 和 <h4> 的问题

标签 html css hover

当我将鼠标悬停在表格中的 h4 标签上时,一切正常。但是,当我将鼠标悬停在位于 h4 元素内的强标签上时,强标签获得与 h4 标签相同的悬停。

我有一个表格元素,每个 td 元素的结构如下所示:

<td>
  <a>
    <div>
      <h4>
        ...<strong>...</strong>...
      </h4>
    </div>
  </a>
</td>

这是影响表格中元素的 CSS。

h4 {
  font-weight: 100;
  margin: 0px;
  padding: 12px 0px;
  color: black;
}

a {
  text-decoration: none;
}

a:visited {
  color: white;
  background-color: none;
}

strong :hover {
  background: none !important;
  background-color: transparent !important;
}

/*Used for the gradient on hover for the background*/

.itemTrue > a > div :hover {
  color: white;
  background: #e4e4e4;
  background: -moz-linear-gradient(top,  #e4e4e4 0%, #295534 73%, #1d3923 88%, #000000 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4e4e4), color-stop(73%,#295534), color-stop(88%,#1d3923), color-stop(100%,#000000));
  background: -webkit-linear-gradient(top,  #e4e4e4 0%,#295534 73%,#1d3923 88%,#000000 100%);
  background: -o-linear-gradient(top,  #e4e4e4 0%,#295534 73%,#1d3923 88%,#000000 100%);
  background: -ms-linear-gradient(top,  #e4e4e4 0%,#295534 73%,#1d3923 88%,#000000 100%);
  background: linear-gradient(to bottom,  #e4e4e4 0%,#295534 73%,#1d3923 88%,#000000 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e4e4', endColorstr='#000000',GradientType=0 );
}

我想做的基本上是在悬停时将强标记的背景保持为空白,同时在悬停时仍将渐变显示为 div/h4 的背景。

当没有任何东西悬停时,一切都完美无缺。

最佳答案

您必须在 CSS 中连接选择器 strong:hover:

strong:hover

在你的代码中是

strong :hover

关于html - 悬停时 <strong> 和 <h4> 的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22314204/

相关文章:

javascript - 无法使用 jQuery 在 Chrome 中访问动态创建的音频元素 onClick

javascript - 使用 JavaScript、HTML5 或任何跨平台语言(支持 Android)向 USB HID 写入数据

html - 使用 Angular 为移动 HTML5 开发人员提供尽可能轻量级的 UI 堆栈

jquery - 没有 Jquery Mobile 或任何其他 UI 框架就无法创建 phonegap 应用程序

html - 如何在 Bootstrap 中使类 ="row"中的图像位于中间

jquery - 鼠标悬停不会在生产环境中触发 jquery 动画

javascript - 网站正文的幻灯片背景

jquery - 将网格项动画到新位置

html - 有没有办法让 GIF 在鼠标悬停时播放并在鼠标移出时暂停?

jQuery 动画无法在悬停时工作