Jquery 显示/隐藏为什么它不起作用？答案

【问题标题】：Jquery show/hide why it's not working?Jquery 显示/隐藏为什么它不起作用？
【发布时间】：2018-04-19 19:39:15
【问题描述】：

我想在悬停另一个元素后显示 div。它们不在同一个div中。悬停类为.option_36_124 的图标时应显示弹出信息

$(".option_36_124").hover(function() {
  $('.poupinfo').show();
}, function() {
  $('.poupinfo').hide();
});

.poupinfo {
  background: black;
  color: white;
  top: 250px;
  right: 527px;
  position: absolute;
  padding: 10px;
  width: 250px;
  display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="product_info"><i class="fa fa-info-circle option_36_124"></i></span>

【问题讨论】：

分享您的完整 HTML
如果您删除 display: none 它会显示您期望的位置吗？
@SanchitPatiyal 你可以在这里查看整个网站mukko.pl/pl/p/Plakat-NEVER-MIND/51
@Coffeebean 是的
它对我有用。见jsfiddle.net/dags77eb。

标签： javascript jquery html css

【解决方案1】：

您的 HTML 结构需要进行一些修改（以便图标和内容不是父子相关而是兄弟姐妹，使图标始终可见且不依赖于内容）并且您还针对您的 .show() 和.hide() 到一个错误的（不存在的）类。希望这会有所帮助：

$(".option_36_124").hover(function(){
    $('.product_info').show();
},function(){
    $('.product_info').hide();
});

 .product_info{
    background: black;
    color: white;
    top: 150px;
    right: 527px;
    position: absolute;
    padding: 10px;
    width: 250px;
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<i class="fa fa-info-circle option_36_124">icon (hover me)</i>
<span class="product_info">content</span>

【讨论】：

【解决方案2】：

$( document ).ready(function() {
$(".option_36_124").hover(function(){
    $('.poupinfo').show();
},function(){
    $('.poupinfo').hide();
});
});

在这里找到答案。

【讨论】：

很好地回答了你自己的问题 :) 现在解释一下它为什么有效！
可能整个 JS 都在页面之前加载 - 所以我需要等待页面加载，然后注入脚本。我认为它是这样工作的——但说实话我不确定......
我同意。它在类存在之前运行
在下面查看我的答案，你不必使用jQuery

【解决方案3】：

这是下面的工作检查代码

$(".option_36_124").hover(function() {
  $('.poupinfo').show();
}, function() {
  $('.poupinfo').hide();
});

.poupinfo {
  background: black;
  color: white;
  top: 250px;
  right: 527px;
  position: absolute;
  padding: 10px;
  width: 250px;
  display: none;
  text-align: right;
  top:25px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="product_info"><i class="fa fa-info-circle option_36_124"></i></span>

<div class="poupinfo">Hii! i am visible now </div>

【讨论】：

【解决方案4】：

不使用jQuery 或任何脚本，对我来说，我更喜欢使用:pseudo 元素，:hover 和:after 的组合可以给你想要的结果，以及你没有做的很棒的事情'不要使用任何脚本！

纯 CSS3 而已:)

   .fa-info-circle:hover::after {
      content: 'hey im popup info!';
      background: black;
      color: white;
      position: absolute;
      padding: 10px;
      width: 250px;
      left: 30px;
    }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="product_info"><i class="fa fa-info-circle option_36_124"></i></span>

【讨论】：