如何仅使用HTML编辑div的悬停效果？

13 浏览
0 Comments

如何仅使用HTML编辑div的悬停效果？

我正在寻找一种仅使用HTML来编辑div的悬停效果的方法。我需要仅使用HTML，因为代码允许无限数量的不同颜色版本的相同div。我知道在普通的div中，可以使用`style="color: red"`来实现，但这只允许我编辑原始div。我需要一段代码仅针对悬停时才能实现编辑。

简而言之：我想在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:

#C5D6D2

0

3 答案

0 Comments

问题的原因是作者不想使用CSS来编辑div的hover效果，而是希望使用HTML来实现，让用户可以选择不同的颜色来编辑每个圆圈。

解决方法是为每个圆圈创建一个id，并在HTML中应用该id来编辑hover效果，代码如下：

以上代码中，每个圆圈都有一个唯一的id，当鼠标悬停在圆圈上时，通过onmouseover事件来改变其背景颜色，当鼠标移出时，通过onmouseout事件将背景颜色重置为空。

通过以上方法，作者成功地使用HTML来编辑div的hover效果，并实现了用户可以选择不同颜色的功能。

0
0 Comments

问题的出现原因：用户想要通过HTML来编辑一个div元素的hover效果，但是他只想用HTML来完成，不使用其他的编程语言。

解决方法：用户可以在style属性中定义hover的颜色，然后在样式表中的: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);

}

.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;

}

#C5D6D2

0
0 Comments

问题的原因是无法使用HTML内联样式来编辑div的hover状态，因为hover是CSS伪元素，只能通过样式表进行访问。解决方法有以下几种：

1. 添加内联JavaScript来改变样式：

2. 在标签中链接CSS样式表并从样式表中编辑：

3. 添加

4. 添加外部样式表链接：

以上是解决问题的几种方法，但不建议使用最后一种方法，因为代码可读性差、不利于SEO等。

0