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

【问题标题】：how to get paragraph element displayed on hovered over input element如何让段落元素显示在悬停在输入元素上
【发布时间】：2019-12-24 01:27:36
【问题描述】：

我有输入元素和段落元素，我希望 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>

【问题讨论】：

可以使用css来实现需要的效果.div_class_name:hover { display: block; };
我已更改问题
已更改为
你必须默认隐藏你的 p
是的，这就是为什么在悬停时不透明度：0 我使不透明度：1

【解决方案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>

【讨论】：

嗨，感谢您的回答，我需要选择器出于某种目的处于不同的级别
@karansys 在这种情况下，您可以改用 javascript 或 jquery。你可以编辑你的问题，我会用它更新我的答案。
完美:)

【解决方案2】：

通过使用 mouseenter（将 .show 类添加到段落中）和 mouseleave（从段落中删除 .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>

【讨论】：