Question

你好，我有一张桌子，用CSS做了一个工具提示

当您将鼠标悬停在<td>上时，它会显示

这是我的jsfiddle ：www.jsfiddle.net/4qzurb5w/

如何使此工具提示始终显示表格中的所有内容？

Answer 1

摆脱这个障碍，这是有冲突的：

skinOffset(curSkin, femaleSkins, -1)

那应该可以。

我将您的不透明度样式移至了.green:hover, .blue:hover, .red:hover, .yellow:hover, .black:hover { opacity: 0.8; }，请参见堆栈片段。

.tooltip .tooltiptext

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  opacity: 0.8; /* <-- I added your opacity here */
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.div table {
  font-family: Arial, Helvetica, sans-serif;
  color: #666;
  font-size: 10px;
  text-shadow: 1px 1px 0px #fff;
  background: #eaebec;
  border: #ccc 1px solid;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 0 1px 2px #d1d1d1;
  -webkit-box-shadow: 0 1px 2px #d1d1d1;
  box-shadow: 0 1px 2px #d1d1d1;
}

.div table caption {
  font-weight: bold;
  font-size: 11px;
}

.div td {
  min-width: 100px;
  text-align: center;
  padding: 5px;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
  background: #fafafa;
  background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
  background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
}

.red {
  background: #940000 !important;
  color: White !important;
  text-shadow: 1px 1px 0px #000000;
}

.blue {
  background: #1C2CFA !important;
  color: White !important;
  text-shadow: 1px 1px 0px #000000;
}

.black {
  background: #000000 !important;
  color: White !important;
  text-shadow: 1px 1px 0px #000000;
}

.yellow {
  background: #009999 !important;
  color: Green !important;
  text-shadow: 1px 1px 0px #000000;
}

.white {
  background: #fafafa !important;
  color: #666 !important;
}

.grey {
  background: #808080 !important;
  color: White !important;
  text-shadow: 1px 1px 0px #000000;
}

.ariza {
  background: #990000 !important;
  color: White !important;
  text-shadow: 1px 1px 0px #000000;
}

.green {
  background: #00941C !important;
  color: White !important;
  text-shadow: 1px 1px 0px #000000;
}

.green:hover,
.blue:hover,
.red:hover,
.yellow:hover,
.black:hover {
  /* opacity: 0.8; get rid of this */
}

.green a,
.blue a,
.red a,
.yellow a,
.black a {
  display: block;
  color: White;
  text-decoration: none;
}

.yazitd {
  width: 70px !important;
}

.sagtd {
  width: 540px !important;
}

.tarihtd {
  width: 160px !important;
}

.style3 {
  width: 90px;
}

.style4 {
  height: 19px;
}

.style5 {
  width: 40px;
}

.style6 {
  width: 40px;
  height: 23px;
}

.style7 {
  height: 23px;
}

在表格中始终显示工具提示（跨度）

1 个答案: