Question

我在堆栈交换上看过类似的帖子，你可以在一个div上空盘旋时更改另一个div的css。但是在我的情况下它不起作用，因为我使用表格单元格。

这里是HTML代码：

body {
  padding: 5%;
}
.tbdata {
  background-color: royalblue;
  color: white;
  cursor: pointer;
}
.tooltip {
  color: white;
  opacity: 0;
  transition: opacity 1s;
  background-color: red;
  min-width: 50px;
  min-height: 100px;
}
.tbdata:hover ~ .tooltip {
  opacity: 1;
}
.tbdata:hover ~ .tooltip:after {
  content: attr(data-);
}

<table>
  <tr>
    <td class="tbdata" data-="This is the tooltip text for col1">This is table data1</td>
    <td class="tbdata" data-="This is the tooltip text for col2">This is table data2</td>
  </tr>
</table>

<div class="tooltip">
</div>

我希望.tooltip div在.tbdata上悬停时可见，并使用表格单元格中的attr()更改内容。

请建议。

Answer 1

您无法在悬停时动态更改content属性，但是，您可以使用一些“技巧”隐藏范围并显示另一个。

下面的示例显示了如何做到这一点。据我所知，这是非JS实现在hover上动态更改div内容的最佳解决方案

.button{
  background:lightblue;
  width:200px;
}

.tooltip{
  background:red;
  width:200px;
}

.tooltip .before { display: block; }
.tooltip .after  { display: none;  }


.button:hover .tooltip{
  background:green;
}

/* Hide the `.before` and show the `.after` */
.button:hover .tooltip .before{ display:none;  }
.button:hover .tooltip .after { display:block; }

<div class="button">
  Hover over me!
  <div class="tooltip"><span class="before">Turn nothing</span><span class="after">Into something</span></div>
</div>

要隐藏/显示内容，您还应将display属性更改应用于.tooltip。但是，为了显示不断变化的内容，我已经为这个演示留下了div。{/ p>

Answer 2

我使用Jquery来解决这个问题。

  $('document').ready(function(){



  $('.tbdata').hover(
  function(){

        $(".tooltip").css("visibility","visible");
        $(".tooltip").attr("attrname","attrvalue"); //attribute
  },
  function(){

        $(".tooltip").css("visibility","hidden");
        $(".tooltip").attr("attrname","attrvalue"); //attribute

  }

  );

});

以下是示例： Fiddle

将鼠标悬停在表格单元格上时，更改另一个div的CSS

2 个答案: