作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我试图将鼠标悬停在文本上时将其颜色更改为白色,但我无法这样做。
这是我试过的代码。如何确保将鼠标悬停在文本上时文本颜色变为白色,并且将鼠标悬停在文本上时文本大小也会发生变化?
这是我试过的代码
h1::before,
h1::after {
content: "";
width: 0%;
position: absolute;
height: 2px;
background: white;
transition: width .3s ease;
}
h1:hover::before,
h1:hover::after {
width: 100%;
}
h1::before {
top: 0;
left: 0;
}
h1::after {
top: 100%;
right: 0;
}
<body>
<div class="text-wrapper">
<h1 id='text'>
Days are gone </h1>
</div>
</body>
最佳答案
您可以使用 :hover
执行此操作。#text:hover{color:red}
body {
Background: #7a86cb;
text-align: center;
}
h1 {
text-align: center;
color: #6849e3;
font-family: Merriweather;
display: inline-block;
position: relative;
}
h1:hover {
color: #6849e3;
}
h1::before,
h1::after {
content: "";
width: 0%;
position: absolute;
height: 2px;
background: blue;
transition: width .3s ease;
}
h1:hover::before,
h1:hover::after {
width: 100%;
}
h1::before {
top: 0;
left: 0;
}
h1::after {
top: 100%;
right: 0;
}
#text:hover{
color:red
}
<body>
<div class="text-wrapper">
<h1 id='text'>
INTERNET </h1>
</div>
</body>
关于html - 将鼠标悬停在文本上时难以更改文本颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56683695/
我想模拟这个函数: function getMetaData(key) { var deferred = $q.defer(); var s3 = vm.ini
我是一名优秀的程序员,十分优秀!