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

时间：2016-07-12 15:48:04

标签： javascript jquery html css css3

问题

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

这是JSFiddle不起作用???代码在一个空白的HTML文件中运行良好，但只需要你在JSFiddle中想要它... https://jsfiddle.net/Please_Reply/osqnweda/5/

否则，原始代码如下...... 

<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>

2 个答案:

答案 0 :(得分：0)

您好，不要太深入了解您的代码。但是如何将css片段添加到topnavbar。

.topnavbar {
  position:absolute;
}

这应该让你的跨度可见。

答案 1 :(得分：0)

新答案：

将<span id='topnavbar'>元素放在隐藏的<div id='shoppingTab'>元素的前面并同时应用float: right;，问题似乎已经存在解决。

要明确这个问题，当你浮动元素时，你必须考虑你希望它们在哪个方面打破;右侧（自然阅读）或左侧。通过在隐藏的元素后面加上<span id='topnavbar'>元素，浮动流就被看到的内容以及打算看到的内容而被抛弃。

此外，当浮动元素时，它们放置在HTML代码中的顺序在它们的呈现方式中起着关键作用。很难解释，但请注意<div id='shopcartbar'>首先出现在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>

旧答案：

内联CSS格式肯定存在一些问题。我建议将inlineCSS放在样式表中以便于阅读和分层流程（基本上将所有内联样式放在样式表中 - 如果有的话，给它一个新的类）。

将span＃topnavbar更新为以下内容：

<span id="topnavbar" style="float:none; font-size:24px; clear: none; right: -175px; position: relative;"></span>

最后，您可能还想考虑驼峰式的可读性。

#topnavbar {
  float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<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;
    }
    
    span#topnavbar {
      float: right;
    }

  </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>
        <span id="topnavbar"></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>
      </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>

相关问题
最新问题