html - 显示文本 html/css 的悬停按钮

Question

我正在学习 HTML 和 CSS。现在我正在尝试制作一个悬停按钮，它显示一些文本，就像 tooltip 功能所做的那样。我怎样才能从这里做到这一点:

<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=2"> 
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
<style> 
    /*TEST HERE*/ 
    .w3-button {width:800px;} 
    .w3-button {height:800px;} `
</style>  
<div class="w3-container"> 
    <h2>TITULO AQUI</h2>   
    <p> 
        <button class="w3-button w3-light-blue">Hover in here</button> 
    </p> 
</div> 
/*<div id="button1"></div>*/

Answer 1

title 属性当然是最明显的。

另一种基于属性的解决方案是使用自定义属性并用伪造显示它，您可以在其中设置更多样式。

button[data-title] {
  position: relative;
  transition: opacity 1s;
}
button[data-title]::after {
  content: attr(data-title);
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-150%);
  background: gray;
  color: lightgreen;
  padding: 10px;
  opacity: 0;
  transition: opacity 0.5s;
}
button[data-title]:hover::after {
  opacity: 1;
}

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
<style> 
    /*TEST HERE*/ 
    .w3-button {width:200px;} 
    .w3-button {height:150px;} `
</style>  
<div class="w3-container"> 
    <h2>TITULO AQUI</h2>   
    <p> 
        <button class="w3-button w3-light-blue" data-title="I'm being hovered">Hover in here</button> 
    </p> 
</div>