如何仅使用 html 编辑 div 悬停？答案

【问题标题】：How to edit a div hover using html only?如何仅使用 html 编辑 div 悬停？
【发布时间】：2019-12-09 12:35:43
【问题描述】：

我正在寻找一种仅使用 html 来编辑 div 悬停的方法。我只需要它是 html，因为代码允许无限数量的相同 div 的不同版本，它们都是不同的颜色。我知道对于常规 div，您可以包含 style="color: red" 但这只能让我编辑原始 div。我需要一个代码，只允许我在悬停时这样做。

TLDR：我希望能够在 html 中编辑 circle:hover。任何帮助将不胜感激。

CSS

.circle {
    border-radius: 32px;
    width: 25px;
    height: 25px;
    float: left;
    font-size: 20px;
    overflow: hidden;
    margin: 30px 15px 30px 15px;
    transition: height 0.5s ease;
    border: 2px solid transparent;
}

.circle:hover {
    border-radius: 32px;
    border: 2px solid #fff;
    height: 200px;
    transition: height 0.5s ease;
}

#text {
    text-align: center;
    transform: rotate(-90deg);
    margin-top: 115px;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
}

HTML

<div class="circle" style="background: rgba(197,214,210,1); box-shadow: 
0px 0px 0px 20px rgba(197,214,210,0.4);"><div id="text">#C5D6D2</div>   
</div>

【问题讨论】：

How to write a:hover in inline CSS?的可能重复
另见stackoverflow.com/questions/26376496/…。

标签： html

【解决方案1】：

下面的代码应该可以工作（把它放在你的css中）

.circle:hover{
    background-color: red;
}

编辑：由于您不想使用 css，您可以为该圈子创建一个 id，然后将其应用到那里。

【讨论】：

感谢您的回复，但我不想使用 css。 CSS 会让每个圆圈都有一个红色背景。我想使用 HTML，因为这样用户可以为每个圆圈选择不同的颜色。

【解决方案2】：

您似乎无法为 hoover 设置内联样式，因为它是 CSS 伪元素，您只能通过样式表访问。

您可以做的是添加内联 javascript 以更改样式

<div class=circle href='index.html' 
    onmouseover='this.style.color="red"' 
    onmouseout='this.style.color="black"'>
</div>

最佳做法是在该部分中链接 CSS 样式表并从那里开始工作。您可以添加以下 HTML 标记：

<head>
   <link rel="stylesheet" href="ThePath/ToYour/CssFile.css">
</head>

其他选项是添加一个标记并在那里写下您的悬停样式。在这种情况下，您将以这样的 HTML 结尾：

<head>
    <meta lots of meta data>
</head>

<body>
 <p class="circle"> this is the element yo want to style </p>
</body>

<footer>
    <style>
       .circle:hover {color: red}
    </style>
</footer>

我不建议你这样做，既不是最好的，也不是为了代码的清晰性，也不是 SEO 等。

另外，正如它在this thread中逐字回答的那样

如果可以的话，您可以添加指向外部样式表的链接。例如，

<script type="text/javascript">
  var link = document.createElement("link");
  link.setAttribute("rel","stylesheet");
  link.setAttribute("href","http://wherever.com/yourstylesheet.css");
  var head = document.getElementsByTagName("head");
  head.appendChild(link);
</script>

注意：以上假设有一个头部。

【讨论】：

【解决方案3】：

您可以在style 属性中使用custom property 定义悬停颜色，然后在样式表的:hover 规则集中引用它。同样的技术可以清理你的 background 和 box-shadow 声明：

.circle:hover {
  color: var(--hover-color);
}

.circle {
  background-color: rgba(var(--bg-color), 1);
  box-shadow: 0 0 0 20px rgba(var(--bg-color), 0.4);
}

/* your original CSS */

.circle {
    border-radius: 32px;
    width: 25px;
    height: 25px;
    float: left;
    font-size: 20px;
    overflow: hidden;
    margin: 30px 15px 30px 15px;
    transition: height 0.5s ease;
    border: 2px solid transparent;
}

.circle:hover {
    border-radius: 32px;
    border: 2px solid #fff;
    height: 200px;
    transition: height 0.5s ease;
}

#text {
    text-align: center;
    transform: rotate(-90deg);
    margin-top: 115px;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
}

<div class="circle" style="--hover-color: red; --bg-color: 197, 214, 210"><div id="text">#C5D6D2</div>   
</div>

【讨论】：