如何在按钮悬停上创建弹出框

使用CSS & HTML我试图创建一个应该出现在按钮悬停上的弹出框。但在下面的代码中，弹出窗口同时出现在<button> & <h2>标记中。由于我是初学者，因此无法了解需要进行哪些更改才能获得正确的输出结果。请帮我解决这个问题。如何在按钮悬停上创建弹出框

HTML页面

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <title> POPOUP</title> 

    <link rel="stylesheet" type="text/css" href="tooltip.css"> 


</head> 
<body style="text-align:center"> 
<div class="popup"> 
<h2>Popup</h2> 

<button type="button" id="b1">BUTTON</button> 
    <span class="popuptext" id="myPopup">A Simple Popup!</span> 
</div> 

</body> 
</html>

我没有JS的正确知识，因此我使用的CSS悬停功能。

CSS

/* Popup container - can be anything you want */ 
.popup { 
    position: relative; 
    display: inline-block; 
    cursor: pointer; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 

/* The actual popup */ 
.popup .popuptext { 
    visibility: hidden; 
    width: 160px; 
    background-color: #555; 
    color: #fff; 
    text-align: center; 
    border-radius: 6px; 
    padding: 8px 0; 
    position: absolute; 
    z-index: 1; 
    top: 225%; 
    left: 50%; 
    margin-left: -80px; 
} 

/* Popup arrow */ 
.popup .popuptext::after { 
    content: ""; 
    position: absolute; 
    top: 100%; 
    left: 50%; 
    margin-left: -5px; 
    border-width: 5px; 
    border-style: solid; 
    border-color: #555 transparent transparent transparent; 
} 

/* Toggle this class - hide and show the popup */ 
.popup .show { 
    visibility: visible; 
    -webkit-animation: fadeIn 1s; 
    animation: fadeIn 1s; 
} 

.popup:hover .popuptext { 
    visibility: visible; 
    opacity: 1; 
} 






/* Add animation (fade in the popup) */ 
@-webkit-keyframes fadeIn { 
    from {opacity: 0;} 
    to {opacity: 1;} 
} 

@keyframes fadeIn { 
    from {opacity: 0;} 
    to {opacity:1 ;} 
}

来源

2017-04-21 Celin Matthews

你要什么样的工具提示？ –

您需要使用此选择，这将触发只有当#b1悬停酥料饼。

.popup #b1:hover + .popuptext

取而代之的是，这是触发酥料饼的时候.popup或者它的所有子元素徘徊。

.popup:hover .popuptext

.popup { 
 
    position: relative; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 

 

 
/* The actual popup */ 
 

 
.popup .popuptext { 
 
    visibility: hidden; 
 
    width: 160px; 
 
    background-color: #555; 
 
    color: #fff; 
 
    text-align: center; 
 
    border-radius: 6px; 
 
    padding: 8px 0; 
 
    position: absolute; 
 
    z-index: 1; 
 
    top: 225%; 
 
    left: 50%; 
 
    margin-left: -80px; 
 
} 
 

 

 
/* Popup arrow */ 
 

 
.popup .popuptext::after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 50%; 
 
    margin-left: -5px; 
 
    border-width: 5px; 
 
    border-style: solid; 
 
    border-color: #555 transparent transparent transparent; 
 
} 
 

 

 
/* Toggle this class - hide and show the popup */ 
 

 
.popup .show { 
 
    visibility: visible; 
 
    -webkit-animation: fadeIn 1s; 
 
    animation: fadeIn 1s; 
 
} 
 

 
.popup #b1:hover + .popuptext { 
 
    visibility: visible; 
 
    opacity: 1; 
 
} 
 

 

 
/* Add animation (fade in the popup) */ 
 

 
@-webkit-keyframes fadeIn { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
} 
 

 
@keyframes fadeIn { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
}

<body style="text-align:center"> 
 
    <div class="popup"> 
 
    <h2>Popup</h2> 
 

 
    <button type="button" id="b1">BUTTON</button> 
 
    <span class="popuptext" id="myPopup">A Simple Popup!</span> 
 
    </div> 
 

 
</body>

来源

2017-04-21 06:24:46

非常感谢！这很好用 –

我很高兴我可以帮忙，顺便说一句，实际的术语是'tooltip'而不是'popup' :) –

如何在按钮悬停上创建弹出框

回答

相关问题