javascript - 鼠标悬停时的文本框

Question

我到处寻找，试图找到一个基本的鼠标悬停文本框，它位于图像的左侧或右侧。位于所有其他图像上方的矩形框中没有什么特别的背景颜色。

我试过在 HTML 中使用“标题”标签，但速度太慢。所以需要一些更具响应性和可编辑性的东西。需要在悬停时出现然后消失。将鼠标光标悬停在图像上时也会出现一个鼠标光标会很好。

Answer 1

您可以使用将 title 属性用作内容的伪元素。

.image {
    position: relative;
}
    
.image:hover:after {
    position: absolute;
    content: attr(title);
    display: inline-block;
    left: 0px;
    top: 0px;
    padding: 5px;
    background-color: black;
    color: white;
}

<div class="image" title="I Show up on Hover">
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"> 
</div>