Question

我试图在悬停时设置工具提示，但没有成功。

这是我的代码：

CSS

   .header_menu_res ul li a:hover:after {
content: attr(title);
color: #fff;
background: #333;
background: rgba(51,51,51,0.75);
padding: 5px;
position: absolute;
left: -9999px;
opacity: 0;
bottom: 100%;
white-space: nowrap;
-webkit-transition: 0.25s linear opacity;
height: 100px !important;
}

HTML

<div class="header_menu_res"><ul><li><a class="primary" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium" href="http://www.test.co.uk/"><em class="icon-home"></em>Home</a></li></ul></div>

当我将鼠标悬停在锚点上时，我仍会看到默认的工具提示？非常感谢任何帮助。

Answer 1

使用以下代码

小提琴：http://jsfiddle.net/tDQWN/

a {
  color: #900;
  text-decoration: none;
}

a:hover {
  color: red;
  position: relative;
}

a[title]:hover:after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 20;
  white-space: nowrap;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

来源：How to change the style of Title attribute inside the anchor tag?

Answer 2

在拥有它的浏览器中，默认的工具提示行为完全超出了CSS的范围和控制范围。这是使用“CSS工具提示”的主要原因之一。但这也意味着除非省略title属性，否则无法用CSS或其他方式阻止默认工具提示出现。

通常的情况是，在使用CSS工具提示时，您不使用title属性，而是将所需的工具提示文本放在其他位置，例如在data-title属性中（除了用CSS和/或JavaScript代码定义之外绝对没有效果）或在与其相关的元素附近的普通元素中，除了鼠标悬停外，通常用CSS隐藏。

因此，最简单的解决方法是在HTML和CSS中将属性名称title更改为data-title。

使用css的工具提示样式不起作用，仍然看到默认工具提示？

2 个答案: