我有3个问题需要帮助。
问题1。
我有一个导航栏，里面有许多元素。标识shopcartbar的div一旦悬停，就会显示ID为shoppingTab的div。我最初在onmouseout div上设置了shopcartbar但是当我尝试将光标移动到shoppingTab div时，它会消失。我希望能够保持shoppingTab div可见，同时将鼠标悬停在其中任何一个div上，并且onmouseout也可以处理其中任何一个，或者至少能够从{ {1}} div到shopcartbar div以保持可见，因为它现在消失了，因为两者之间存在微小的差距，即使我使用CSS关闭，也没有解决问题。在您阅读代码并说我已将其设置为不断修复页面之前，我故意将其设置为没有shoppingTab事件，否则一旦我移动光标它就会消失，因此出于调试目的，我使它看起来永久地迫使我每次想要它都不会刷新页面。
第2期
当我将onmouseout div的高度设置为100％时，它只覆盖其中的span标签，而不是那些标签下面的9个div，使内容溢出div。所以我希望shoppingTab div能够实际扩展所有内容，而不仅仅是在span标记之后停止。请注意：内容量会发生变化，因此不能是固定的像素高度或百分比。
第3期
我有一个cookie，只是将用户的名字放在位于shoppingTab div之前的topnavbar div中。当我将鼠标悬停在shopcartbar div上以显示shopcartbar div时，它会使人员姓名消失，同时将文本留在shoppingTab div中。即使在悬停时显示shopcartbar div，我也希望topnavbar div中的文本保持不变。请注意：人名必须放在shoppingTab div。
这是包含解决3个问题所需的所有内容的HTML。
shopcartbar @charset "utf-8";
/* CSS Document */
body{ /* Applies to the <body> tag */
margin:0px; /* Sets the margin on all sides to 0px */
}
.container{ /* The container class */
width:100%; /* This sets the width */
height:100%; /* This sets the height */
background-color:black; /* Sets the background colour */
font-family:"Myriad Pro"; /* Sets the font family */
}
.header{ /* The header class */
width:100%;
background-color:#323232;
color:white; /* The sets the colour of the font */
}
.body{
width:100%;
height:1100px;
background-color:white;
color:black;
text-align:center; /* Determines the positioning of the text alignment */
}
.footer{
width:100%;
height:50px;
background-color:#323232;
color:white;
text-align:center;
}
div{
display: inline-block; /* Sets the display type */
float:left; /* Sets the float position */
}
#one, #two, #three, #four{
background-color:#323232;
height:90px;
color:white;
text-align:center;
font-size:25px;
}
#slider{
background-color:#ed1c24;
height:10px;
width:100px;
position: absolute; /* Sets the position to a specific type */
left: 0; /* Sets the number of pixels from the left that this object is placed */
bottom:0; /* Sets the number of pixels from the bottom that this object is placed */
}
.inside{
margin-left:30px; /* Specifies the margin from the left side */
margin-right:30px; /* Specifies the margin from the right side */
padding-top:7px; /* Specifies the padding from the top side */
pointer-events:none; /* Specifies the cursor events */
margin-top:25px; /* Specifies the margin from the top side */
}
.button{
display: inline-block;
border-radius: 4px; /* Specifies the radius of each corner */
background-color: #ed1c24;
border:none; /* Specifies the border type */
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 10px;
width: 200px;
transition: all 0.5s; /* Specifies the the interval over which an animation occurs */
cursor: pointer; /* Specifies the cursor type */
margin: 5px;
height:60px;
}
.button span{
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after{
content: '»'; /* Specifies the content of the div */
position: absolute;
opacity: 0; /* Specifies the opacity or transparency level */
top: 0; /* Specifies the distance from the top */
right: -20px; /* Specifies the distance from the right */
transition: 0.5s;
}
.button:hover span{
padding-right: 25px;
}
.button:hover span:after{
opacity: 1;
right: 0;
}
#cover{
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,0.6);
z-index:5;
width:100%;
height:100%;
display:block;
}
#loginScreen{
height:300px;
width:400px;
z-index:10;
background-color:white;
no-repeat; border:7px solid #cccccc;
border-radius:10px;
margin-left:35%;
margin-top:12%;
position:relative;
padding-top:10px;
font-family:"Myriad Pro";
font-size:18px;
}
.cancel{
display:block;
position:absolute;
top:3px;
right:2px;
background:rgb(245,245,245);
color:black;
height:32px;
width:32px;
font-size:30px;
text-decoration:none;
text-align:center;
font-weight:bold;
border-radius:36px;
cursor: pointer;
}
p1{
font-style: italic;
overflow: hidden;
text-align: center;
}
p1:before, p1:after{
background-color: #000;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 40%;
}
p1:before{
right: 0.5em;
margin-left: -50%;
}
p1:after{
left: 0.5em;
margin-right: -50%;
}
#searchbar{
background:url(../images/searchbarbg.png) no-repeat scroll;
padding-left:30px;
height:24px;
width:180px;
border-radius:36px;
}
.product{
height:290px;
width:200px;
float:left;
border: 5px solid black;
border-radius:10px;
margin-left:3%;
margin-top:3%;
font-size:16px;
text-align:center;
cursor:pointer;
}
.product:hover{
border:5px solid #ed1c24;
}
table{
border-collapse: collapse;
}
table, td, th{
border: 0px solid black;
}
#shoppingTab{
display:none;
height:670px;
width:400px;
background-color:white;
color:black;
position:relative;
margin-top:-2px;
border-radius:10px;
color:black;
border:1px solid #323232;
padding:10px;
float:right;
z-index:50;
}
.plusbutton{
height:25px;
width:25px;
border:1px solid black;
background-color:#323232;
float:left;
border-radius:5px 0px 0px 5px;
color:white;
cursor:pointer;
}
.minusbutton{
height:25px;
width:25px;
border:1px solid black;
background-color:#323232;
float:left;
border-radius:0px 5px 5px 0px;
color:white;
cursor:pointer;
}
.quantityBox{
height:23px;
width:25px;
border-top:1px solid black;
border-bottom:1px solid black;
background-color:white;
float:left;
text-align:center;
line-height:24px;
}
.smallProduct{
height:50px;
width:390px;
float:left;
border: 5px solid black;
border-radius:10px;
font-size:16px;
cursor:pointer;
margin-bottom:10px;
overflow:hidden;
}
.smallProduct:hover{
border:5px solid #ed1c24;
}
/* #ed1c24 is red, #323232 is grey */
问题1的所需功能
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div style="float:right; font-family:'Myriad Pro'; background-image:url(images/loginsignupbar.png); width:535.1px; height:30px">
<div onmouseover="document.getElementById('shoppingTab').style.display='block';" id="shopcartbar" style="float:right; font-size:24px; margin-top:-7px">
<img src="images/shoppingCart.png" height="30px"/> Shopping Cart (<span id="numberOfItems">0</span>)
</div>
<div id="shoppingTab">
Shopping Cart<br />
<div class="smallProduct" style="margin-top:5px" id="thmbproduct0"></div>
<div class="smallProduct" id="thmbproduct1"></div>
<div class="smallProduct" id="thmbproduct2"></div>
<div class="smallProduct" id="thmbproduct3"></div>
<div class="smallProduct" id="thmbproduct4"></div>
<div class="smallProduct" id="thmbproduct5"></div>
<div class="smallProduct" id="thmbproduct6"></div>
<div class="smallProduct" id="thmbproduct7"></div>
<div class="smallProduct" id="thmbproduct8"></div>
Total: $<span id="totalPrice">00</span>.00
</div>
<span id="topnavbar" style="float:right; font-size:24px; margin-top:5.5px">
</span>
</div>
<div style="float:right; clear:right"> <!-- This is the navigation menu -->
<div style="position:relative"> <!-- This is the container of the navigation menu -->
<div id="slider"></div> <!-- This is the slider bar -->
<a href="index.html"><div id="one" class="item"><div class="inside">Home</div></div></a> <!-- This is just one of the buttons -->
<a href="about.html"><div id="two" class="item"><div class="inside">About Us</div></div></a>
<a href="shop.html"><div id="three" class="item"><div class="inside">Shop</div></div></a>
<a href="contact.html"><div id="four" class="item"><div class="inside">Contact</div></div></a>
</div>
</div>
</div>
<div class="body"> <!-- This is the body --><br />
<span style="font-size:50px">Welcome to the store.</span><br />
<table width="90%" style="margin-left:5%; margin-bottom:2%">
<tr>
<td style="width:20%; border-right:solid black 1px; border-bottom:solid black 1px"><b>Search Tools</b></td>
<td style="border-bottom:solid black 1px"><b>Products</b></td>
<td style="border-bottom:solid black 1px"><span style="float:right; margin-bottom:1%">Search for products... <span style="color:#666"><i>(e.g. Mirage Sedan)</i></span> <input type="text" id="searchbar" onkeyup="searchProducts(this.value)"/></span></td>
</tr>
<tr>
<td style="border-right:solid black 1px; padding-top:3%" valign="top">
<b>Sort Type:</b><br /><br />
<select id="sortType">
<option value="AtoZ">A to Z</option>
<option value="ZtoA">Z to A</option>
<option value="LowtoHigh">Price (low to high)</option>
<option value="HightoLow">Price (high to low)</option>
</select>
<br /><br /><form><b>Price range:</b><br /><br /><input id="priceRange" step="100" value="42000" min="12000" max="42000" type="range"/><div id="rangeVal">0</div><br /><br /><b>Model Type:</b><br /><br /><input type="radio" name="model"/>Car<br /><input type="radio" name="model"/>SUV</form></td>
<td colspan="2">
<div class="product" id="product0"></div>
<div class="product" id="product1"></div>
<div class="product" id="product2"></div>
<div class="product" id="product3"></div>
<div class="product" id="product4"></div>
<div class="product" id="product5"></div>
<div class="product" id="product6"></div>
<div class="product" id="product7"></div>
<div class="product" id="product8"></div>
</td>
</tr>
</table>
</div>
<div class="footer"> <!-- This is the footer -->
<br />This is the footer</span>
</div>
</div>
<div id="cover">
<div id="loginScreen">
<center id="content"><br />
<span style="font-size:45px" id="popuptitle">Welcome!</span><br />
<span id="popupdescription">Please log in or sign up.</span><br />
<button class="button" style="font-size:20px; height:45px; width:150px; margin-top:15px; margin-bottom:15px" onclick="logInMenu()"><span>Log In</span></button><br /><p1>OR</p1><br />
<button class="button" style="font-size:20px; height:45px; width:150px; margin-top:15px; margin-bottom:15px" onclick="signUpMenu()"><span>Sign Up</span></button>
</center>
<a onclick="document.getElementById('cover').style.display = 'none'" class="cancel">×</a>
</div>
</div>
答案 0 :(得分：0)
对于问题1，您可以在onmouseout（）函数中尝试使用setTimeout（）函数链接到实际代码（使其消失）并延迟（以毫秒为单位，例如：500）
https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout
如果它不起作用，请尝试将shoppingtab和shopcartbar放在一个div中，并使用该div的onmouseover来显示和隐藏shoppingTab