Fatal编程技术网
  • javascript/
  • Javascript 当onmouseover显示隐藏的div时，如何阻止此跨度消失？

Javascript 当onmouseover显示隐藏的div时，如何阻止此跨度消失？

javascript jquery html css

Javascript 当onmouseover显示隐藏的div时，如何阻止此跨度消失？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,问题 当onmouseover将隐藏div上的显示从“无”更改为“块”时，ID为topnavbar的范围会一直消失。onmouseout之后，跨度重新出现，如何确保跨度始终保持在那里？此外，您可能会想知道我的代码中元素的位置，但这是由于古怪的CSS，事情就是wya。我真的不介意任何调整，只要内容TESTING123的跨度放在购物车图像之前，当然还有包含文本购物车（0）的div 这是一个不起作用的JSFIDLE？？？代码在一个空白的HTML文件中可以正常工作，但如果您想在JSFIDLE中使用它，请

问题

当
onmouseover
将隐藏div上的显示从“无”更改为“块”时，ID为
topnavbar
的范围会一直消失。onmouseout之后，跨度重新出现，如何确保跨度始终保持在那里？此外，您可能会想知道我的代码中元素的位置，但这是由于古怪的CSS，事情就是wya。我真的不介意任何调整，只要内容
TESTING123
的跨度放在购物车图像之前，当然还有包含文本购物车（0）的div

这是一个不起作用的JSFIDLE？？？代码在一个空白的HTML文件中可以正常工作，但如果您想在JSFIDLE中使用它，请点击这里

否则，原始代码如下所示

<head>
<style>
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:white; /* Sets the background colour */
    font-family:"Myriad Pro"; /* Sets the font family */
}
.header{ /* The header class */
    width:100%;
    background-color:blue;
    color:white; /* The sets the colour of the font */
}
div{
    display: inline-block; /* Sets the display type */
    float:left; /* Sets the float position */
}
#one, #two, #three, #four{
    background-color:black;
    height:90px;
    color:white;
    text-align:center;
    font-size:25px;
}
#slider{
    background-color:blue;
    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 */
}
#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;
}
.smallProduct{
    height:50px;
    width:390px;
    float:left;
    border: 2px solid black;
    border-radius:10px;
    font-size:16px;
    cursor:pointer;
    margin-bottom:10px;
    overflow:hidden;
}
.smallProduct:hover{
    border:2px solid blue;
}
</style>
</head>
<body>
<div class="container"> <!-- This is the container -->
    <div class="header"> <!-- This is the header -->
        <div style="float:left"> <!-- This is the logo -->
            <img src="logo.png" height="120px"/>
        </div>
        <div style="float:right; font-family:'Myriad Pro'; background-image:url(images/loginsignupbar.png); width:535.1px; height:30px">
            <div onmouseover="tabDisplay('block')" id="shopcartbar" style="float:right; font-size:24px; margin-top:-7px">
            <img src="images/shoppingCart.png" height="30px"/>&nbsp;Shopping Cart (<span id="numberOfItems">0</span>)&nbsp;
            </div>
            <div id="shoppingTab" onmouseout="tabDisplay('none')">
            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="link.html"><div id="one" class="item"><div class="inside">Button 1</div></div></a> <!-- This is just one of the buttons -->
                <a href="link2.html"><div id="two" class="item"><div class="inside">Button 2</div></div></a>
                <a href="link3.html"><div id="three" class="item"><div class="inside">Button 3</div></div></a>
                <a href="link4.html"><div id="four" class="item"><div class="inside">Button 4</div></div></a>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
document.getElementById("topnavbar").innerHTML = "TESTING 123";

function tabDisplay(displayStatus){
    shoppingTab.style.display = displayStatus;
}
</script>
<script type="text/javascript" src="./jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function() {
  $("#slider").animate({
    "left": $('#three').position().left + "px",
    "width": $('#three').width() + "px"
  }, 0);

  $(".item").hover(function() {
    $("#slider").stop();
    $("#slider").animate({
      "left": $(this).position().left + "px",
      "width": $(this).width() + "px"
    }, 500);
  });

  $(".item").on("mouseout", function() {
    $("#slider").stop();
    $("#slider").animate({
      "left": $('#three').position().left + "px",
      "width": $('#three').width() + "px"
    }, 500);
  });
});
</script>


body{/*适用于标记*/
边距：0px；/*将所有边的边距设置为0px*/
}
.container{/*容器类*/
宽度：100%；/*设置宽度*/
高度：100%；/*设置高度*/
背景色：白色；/*设置背景色*/
字体系列：“Myriad Pro”/*设置字体系列*/
}
.header{/*头类*/
宽度：100%；
背景颜色：蓝色；
颜色：白色；/*设置字体的颜色*/
}
div{
显示：内联块；/*设置显示类型*/
浮动：左；/*设置浮动位置*/
}
#一、二、三、四{
背景色：黑色；
高度：90px；
颜色：白色；
文本对齐：居中；
字体大小：25px；
}
#滑块{
背景颜色：蓝色；
高度：10px；
宽度：100px；
位置：绝对；/*将位置设置为特定类型*/
left:0；/*设置放置此对象的距离左侧的像素数*/
底部：0；/*设置从底部放置此对象的像素数*/
}
.里面{
左边距：30px；/*指定左边距*/
右边距：30px；/*指定右边距*/
padding top:7px；/*指定从顶部开始的填充*/
指针事件：无；/*指定光标事件*/
页边距顶部：25px；/*指定从顶部开始的页边距*/
}
#购物标签{
显示：无；
高度：670px；
宽度：400px；
背景色：白色；
颜色：黑色；
位置：相对位置；
页边顶部：-2px；
边界半径：10px；
颜色：黑色；
边框：1px实心#323232；
填充：10px；
浮动：对；
z指数：50；
}
.小型产品{
高度：50px；
宽度：390px；
浮动：左；
边框：2件纯黑；
边界半径：10px；
字体大小：16px；
光标：指针；
边缘底部：10px；
溢出：隐藏；
}
.smallProduct:悬停{
边框：2件纯蓝；
}
购物车（0）
购物车

总额：00.00美元
document.getElementById（“topnavbar”）.innerHTML=“TESTING 123”；
功能选项卡显示（显示状态）{
shoppingTab.style.display=显示状态；
}
$（文档）.ready（函数（）{
$（“#滑块”）。设置动画({
“左”：$（“#三”）.position（）.left+“px”，
“宽度”：$（“#三”）.width（）+“px”
}, 0);
$（“.item”）.hover（函数（）{
$（“#滑块”）.stop（）；
$（“#滑块”）。设置动画({
“左”：$（this.position（）.left+“px”，
“宽度”：$（this）.width（）+“px”
}, 500);
});
$（“.item”）。在（“mouseout”，function（）上{
$（“#滑块”）.stop（）；
$（“#滑块”）。设置动画({
“左”：$（“#三”）.position（）.left+“px”，
“宽度”：$（“#三”）.width（）+“px”
}, 500);
});
});
您好，无需深入查看您的代码。但是，在topnavbar中添加一个css片段怎么样

.topnavbar {
  position:absolute;
}
这将使您的span保持可见。

您好，无需深入查看代码。但是，在topnavbar中添加一个css片段怎么样

.topnavbar {
  position:absolute;
}
这会让你的跨度保持可见。

新答案：

将
元素放在隐藏的
元素前面，并应用
浮点：右对它来说，问题似乎已经解决了

为了具体地理解这个问题，当你浮动元素时，你必须考虑你希望他们突破的那一面；右侧（自然读数）或左侧。通过将
元素放在隐藏的元素之后，浮动流在所看到的和预期看到的方面被丢弃

此外，当浮动元素时，它们在HTML代码中的放置顺序对它们的呈现方式起着关键作用。很难解释，但请注意
如何在HTML代码中首先出现，但在页面上查看时呈现最后一个（或第二个）


<span id="topnavbar" style="float:right;"></span>
<div id="shoppingTab" onmouseout="tabDisplay('none')">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>




身体{
/*应用于标记*/
边际：0px；
/*将所有边上的边距设置为0px*/
}
.集装箱{
/*容器类*/
宽度：100%；
/*这将设置宽度*/
身高：100%；
/*这设置了高度*/
背景色：白色；
/*设置背景色*/
字体系列：“Myriad Pro”；
/*设置字体系列*/
}
.标题{
/*标题类*/
宽度：100%；
背景颜色：蓝色；
颜色：白色；
/*设置字体的颜色*/
}
div{
显示：内联块；
/*设置显示类型*/
浮动：左；
/*设置浮动位置*/
}
#一,，
#二,，
#三,，
#四{
背景色：黑色；
高度：90px；
颜色：白色；
文本对齐：居中；