时间戳

首页 > 解决方案 > html中的悬停样式属性

html - html中的悬停样式属性

问题描述

我想为文本添加颜色。我有更多的文字。所以我从服务器检索文本颜色并将文本颜色添加到相应的文本中。我想为文本添加边框，并且需要在悬停文本时为边框分配相应的文本颜色。

在样式表中，我们可以像下面这样提供悬停：

.text: hover{ color:#FF0000; }

但我有动态文本颜色。我想为相应文本的边框分配相应的文本颜色。在样式表中，我们做不到。

有没有办法在 div 的样式属性中添加悬停？

标签： htmlcsshover

解决方案

嗨，您可以在我的代码片段中使用 Jquery 来实现这一点，我使用公共变量作为颜色并使用它，请看一下。

获取悬停事件并动态添加样式和删除样式

var color = "red";
$(".mycontent").hover(
  function () {
    $(this).css({
    "color": color,
    "border":" 1px solid "+color
    })
  },
  function () {
    $(this).css({
    "color": "inherit",
    "border":"inherit"
    })
  }
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mycontent">  inner content</div>

推荐阅读