html元素悬停在另一个元素上？答案

【问题标题】：html element to hover over another element?html元素悬停在另一个元素上？
【发布时间】：2015-03-25 02:14:25
【问题描述】：

如何将一个 html 元素放在另一个元素的前面，以便当一个特定元素悬停在新元素上时，它会出现在它的前面。这是我的代码：

<div class="third">
        <label> Enter Password: </label>
        <input type="text" name="pword1" class="iBox" id="pword1" onmouseout="HideToolTip()" onmouseover="ShowToolTip()" onkeyup="allFunctions()" placeholder="choose a password" autocomplete="off">
        <p id="tooltipbox" style="visibility:hidden">Password must be between 8-16 characters, contain an uppercase, lowercase, number and special character</p>
    </div>

我有一个工具提示，到目前为止它可以工作。但是当我将鼠标悬停在 textarea 上时，它会将其下方的元素向下推，以便工具提示可以适合页面，当我移动鼠标以“取消悬停”它时，元素会重新向上定位。我想要一种方式，当我悬停时，一个消息框被带到前面，下面的所有元素都不会移动。就像您将任何链接悬停在此页面上时一样，它们会弹出一个小对话框，该对话框仅在悬停时出现并且不会重新定位页面上的其他元素。

【问题讨论】：

使用绝对定位：<p id="tooltipbox" style="position:absolute;visibility:hidden">
@gknicker 谢谢。会投票但不回答！

标签： javascript html css hover

【解决方案1】：

我为你创建了一个 jsfiddle。单击以下链接以查看示例： http://jsfiddle.net/xL7j4k6g/

参考上面的链接，这里也是代码：

.fieldarea {
    position: relative;
    border: 1px solid red;
    width: 50%;
}
.fieldarea label {
    width: 35%;
    display: inline-block;
}
.fieldarea input {
    width: 50%;
    display: inline-block;
}
.tooltipbox {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 1000;
    max-width: 200px;
    border: 1px solid gray;
    background-color: yellow;
    opacity: 0;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}
.fieldarea:hover .tooltipbox {
    opacity: 1;
}

<div class="fieldarea">
        <label for="pword1">Enter Password:</label>
        <input type="text" name="pword1" placeholder="choose a password" autocomplete="off">
        <div class="tooltipbox">Password must be between 8-16 characters, contain an uppercase, lowercase, number and special character</div>
    </div>
<div class="fieldarea">
        <label for="pword1">Enter Password:</label>
        <input type="text" name="pword1" placeholder="choose a password" autocomplete="off">
        <div class="tooltipbox">Password must be between 8-16 characters, contain an uppercase, lowercase, number and special character</div>
    </div>

（这看起来并不“酷”但很有效。我建议您研究 CSS3 过渡以进行一些不错的转换触摸 - 例如，在悬停时淡入工具提示。）

谢谢，大卫

【讨论】：

如何让我的工具提示慢慢淡入？目前它就像你的一样突然。我也没有使用悬停，所以我不能使用淡入淡出。谢谢
我只是快速搜索了一下。这是一个示例：bavotasan.com/2011/a-simple-fade-with-css3 我还将更新我的示例以包含一个示例。

【解决方案2】：

您可以使用绝对定位和 jQuery。这并不完美，只是一个简单的例子。

$(document).ready(function() {
  $('.box1').hover(function() {
    $('.box2').toggleClass('active')
  })
})

.wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border: 2px solid black;
  background-color: white;
}
.box1 {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: blue;
}
.box2 {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 100;
  background-color: red;
}
.active {
  left: 0;
}

<html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="wrapper">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="script.js"></script>
</body>

</html>

【讨论】：

【解决方案3】：

你需要指定z-index和position属性；例如：

p#tooltipbox{
   z-index:1000;
   position:absolute;
   top:0;//move the element to the top of div.third of div.third
   left:0;//if you want to move the element to the left;
}
div.third{
   position:relative;
}

这里有更多信息
z-index property
position propery

【讨论】：