Question

当我将鼠标移到文本上时，我想保持颜色。但是，我不知道如何永远保持这一点。有什么建议吗？

就像那样：

感谢

＆＃13;

.link span{
    color:blue;
    font-size:30px;
}

.link:hover span{
    font-weight:bold;
    color: red;
    text-decoration:none;
}

.link:hover{
    text-decoration:underline;

}

＆＃13;

<a href="#" class="link">
    <span>
        my link
    </span>
</a>

＆＃13;

Answer 1

您可以尝试transition黑客来实现此目标

＆＃13;

.link span{
    color:blue;
    font-size:30px;
  transition:0s 1000000000000000000000s;
}

.link:hover span{
    font-weight:bold;
    color: red;
    text-decoration:none;
  transition:0s;
}

.link:hover{
    text-decoration:underline;

}

＆＃13;

<a href="#" class="link">
    <span>
        my link
    </span>
</a>

＆＃13;

Answer 2

如果您想要永久性更改，则必须使用JavaScript在悬停时向其添加类。你不能只用CSS做这件事。

// Add JS:
var links = document.getElementsByClassName('link');
for(i=0;i<links.length;i++) {
  links[i].onmouseover = function() {
    this.className = 'link active';
  }
}

.link span{
    color:blue;
    font-size:30px;
}

.link.active span, // Add this selector
.link:hover span{
    font-weight:bold;
    color: red;
    text-decoration:none;
}

.link:hover{
    text-decoration:underline;

}

<a href="#" class="link">
    <span>
        my link
    </span>
</a>

鼠标悬停在文本上时如何保持颜色

2 个答案: