如何让段落元素显示在悬停在输入元素上

Question

我有输入元素和段落元素，我希望 p 元素仅在悬停在输入元素上时显示。

这是我试过的

<html>
 <body>
 <div class="overlay">
   <input id="inputCustomer" value="sometext">
 </div>
 <div class="content">
  <p id="spandiv">This the p element</p>
 </div>
 </body>
 <style>
    #spandiv {
        background-color: #232F34;
        color:#FFFFFF;
        opacity:0;
    }

    #inputCustomer:hover + #spandiv {
    display: block;
    opacity:1;
    }

 </style>
</html>

Answer 1

要使用 plus sign，您必须将所有选择器放在同一级别：

#spandiv {
    background-color: #232F34;
    color:#FFFFFF;
    opacity:0;
}

#inputCustomer:hover + #spandiv {
    display: block;
    opacity:1;
}

<div class="overlay">
   <input id="inputCustomer" value="sometext">
   <p id="spandiv">This the p element</p>
 </div>

JavaScript 版本（在不同级别使用它们）：

document.getElementById('inputCustomer').addEventListener('mouseover', function () {
  document.getElementById('spandiv').style.opacity = 1;
});

document.getElementById('inputCustomer').addEventListener('mouseout', function () {
  document.getElementById('spandiv').style.opacity = 0;
});

#spandiv {
    background-color: #232F34;
    color:#FFFFFF;
    opacity: 0;
}

 <div class="overlay">
   <input id="inputCustomer" value="sometext">
 </div>
 <div class="content">
  <p id="spandiv">This the p element</p>
 </div>

Answer 2

通过使用 mouseenter（将 class .show 添加到段落中）和 mouseleave（从段落中删除 class .show）。在样式中你可以定义 class .show

<style>
#spandiv {
  display: block;
  background-color: #232f34;
  color: #ffffff;
  opacity: 0;
}
#spandiv.show {
  opacity: 1;
}
</style>

<div class="overlay">
  <input id="inputCustomer" value="sometext">
</div>
<div class="content">
  <p id="spandiv">This the p element</p>
</div>

<script>
var input = document.getElementById("inputCustomer");
var paragraph = document.getElementById("spandiv");
input.addEventListener("mouseenter", function(e) {
  paragraph.classList.add('show');
});
input.addEventListener("mouseleave", function(e) {
  paragraph.classList.remove('show');
});
</script>

如何让段落元素显示在悬停在输入元素上

how to get paragraph element displayed on hovered over input element

html

javascript

css

hover