gpt4 book ai didi

html - 将鼠标悬停在工具提示上?无法让它与顶部导航栏中的列表一起使用?

转载 作者:行者123 更新时间:2023-11-28 14:54:21 25 4
gpt4 key购买 nike

我一直在使用 W3schools 来解决这个问题,但我看不出我做错了什么?

我已将文本添加到左上角的图像图标,这是我希望在鼠标悬停时显示为工具提示的内容。我只尝试设计第一个(位置工具提示)的样式,但我终究无法弄清楚哪里出了问题。最好有一个解释,因为据我所知它应该有效?

body {
margin: 0;
}

/* Top NAVBAR */

.topbar {
background-color: #17D8C7;
height: 35px;
overflow: hidden;
align-items: center;
padding: 0 2% 0 2%;
}

.topbar nav {
display: flex;
justify-content: space-between;
padding-top: 5px;
}

.topbar ul {
margin: 0;
padding-left: 0;
list-style: none;
position: relative;
display: inline-block;
}

.topbar ul li {
display: inline-block;
vertical-align: middle;
}

.topbar ul li a {
display: inline-block;
text-align: center;
text-decoration: none;
}

.topbar ul li img {
height: 24px;
padding: 0px 5px 0px 0px;
vertical-align: middle;
}

.topbar ul li a span {
vertical-align: middle;
}

.topright span {
padding: 10px;
color: #ffffff;
}

.topbar a {
color: rgba(255, 255, 255, 0.8);
}

.topbar a:hover {
color: white;
}

.location-pin {
position: relative;
display: inline-block;
}

.location-pin .locationtooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -60px;
}

.location-pin .locationtooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}

.location-pin:hover .locationtooltiptext {
visibility: visible;
}
<html lang="en-gb">

<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Complete Suites</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body class="body">
<header class="topbar">
<nav>
<ul class="topleft">
<li class="location-pin">
<a href="#"><img src="https://s8.postimg.cc/6t7njymhx/location-pin.png" alt="Location Pin"></a>
</li>
<span class="locationtooltiptext">EN11 0LB</span>
<li class="contact-email">
<a href="#"><img src="https://s8.postimg.cc/ytbr47v39/contact-email.png" alt="Contact Email"></a>
</li>
<span class="emailtooltiptext">contact@completesuites.co.uk</span>
<li class="open-time">
<a href="#"><img src="https://s8.postimg.cc/fbh3oalat/open-time.png" alt="Opening Times"></a>
</li>
<span class="timetooltiptext">8:30 - 16:00</span>
</ul>
<ul class="topmiddle">
<li>
<a href="#"><img src="https://s8.postimg.cc/ytbr47v39/contact-email.png" alt="Email Promotions Sign Up"><span>Email Promotions</span></a>
</li>
</ul>
<ul class="topright">
<li><a href="#">Blog</a><span>|</span></li>
<li><a href="#">About Us</a><span>|</span></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>

最佳答案

只是替换

.location-pin .locationtooltiptext

.location-pin + .locationtooltiptext

此外,所有其他实例。

解释:

选择器 .location-pin .locationtooltiptext 表示具有 .locationtooltiptext 类的元素 .location-pin.

你想要 .locationtooltiptext 紧挨着 .location-pin 你需要选择器 .location-pin + .locationtooltiptext

The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element

https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

html, body {
height: 100%;
}

body {
margin: 0;
}

/* Top NAVBAR */

.topbar {
background-color: #17D8C7;
height: 35px;
align-items: center;
padding: 0 2% 0 2%;
}

.topbar nav {
display: flex;
justify-content: space-between;
padding-top: 5px;
}

.topbar ul {
margin: 0;
padding-left: 0;
list-style: none;
position: relative;
display: inline-block;
}

.topbar ul li {
display: inline-block;
vertical-align: middle;
}

.topbar ul li a {
display: inline-block;
text-align: center;
text-decoration: none;
}

.topbar ul li img {
height: 24px;
padding: 0px 5px 0px 0px;
vertical-align: middle;
}

.topbar ul li a span {
vertical-align: middle;
}

.topright span {
padding: 10px;
color: #ffffff;
}

.topbar a {
color: rgba(255, 255, 255, 0.8);
}

.topbar a:hover {
color: white;
}

.location-pin {
position: relative;
display: inline-block;
}

.location-pin .locationtooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -60px;
}

.location-pin .locationtooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}

.location-pin:hover .locationtooltiptext {
visibility: visible;
}
<html lang="en-gb">

<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Complete Suites</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body class="body">
<header class="topbar">
<nav>
<ul class="topleft">
<li class="location-pin">
<a href="#"><img src="https://s8.postimg.cc/6t7njymhx/location-pin.png" alt="Location Pin"></a>
<span class="locationtooltiptext">EN11 0LB</span>
</li>
<li class="contact-email">
<a href="#"><img src="https://s8.postimg.cc/ytbr47v39/contact-email.png" alt="Contact Email"></a>
</li>
<span class="emailtooltiptext">contact@completesuites.co.uk</span>
<li class="open-time">
<a href="#"><img src="https://s8.postimg.cc/fbh3oalat/open-time.png" alt="Opening Times"></a>
</li>
<span class="timetooltiptext">8:30 - 16:00</span>
</ul>
<ul class="topmiddle">
<li>
<a href="#"><img src="https://s8.postimg.cc/ytbr47v39/contact-email.png" alt="Email Promotions Sign Up"><span>Email Promotions</span></a>
</li>
</ul>
<ul class="topright">
<li><a href="#">Blog</a><span>|</span></li>
<li><a href="#">About Us</a><span>|</span></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>

关于html - 将鼠标悬停在工具提示上?无法让它与顶部导航栏中的列表一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51232014/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com