Question

我正在尝试在输入上显示输入元素之后的div。

我的HTML：

<div>
  <input type="text" size="5" maxlength="5" />
  <div class="popup">Small text popup</div>
</div>

我的jquery：

$(document).ready(function(){
  $(':input[type="text"]'.hover(
    function(){$(this).siblings("div:first").show();},
    function(){$(this).siblings("div:first").hide();}
  );
});

但它还没有工作，有什么不对或我怎么能这样做（jquery，而不是css）？

Answer 1

您的代码中没有任何错误，在选择器中缺少)

＆＃13;

$(document).ready(function() {
  $(':input[type="text"]').hover(
    //                 ----^----
    function() {
      $(this).siblings("div:first").show();
    },
    function() {
      $(this).siblings("div:first").hide();
    });
});

＆＃13;

.popup {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <input type="text" size="5" maxlength="5" />
  <div class="popup">Small text popup</div>
</div>

＆＃13;

您可以使用 next() 立即跟随兄弟

＆＃13;

$(document).ready(function() {
  $(':input[type="text"]').hover(
    function() {
      $(this).next().show();
    },
    function() {
      $(this).next().hide();
    });
});

＆＃13;

.popup {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <input type="text" size="5" maxlength="5" />
  <div class="popup">Small text popup</div>
</div>

＆＃13;

Answer 2

您可以使用相邻的同级选择器method should not have parameters来使用完整的css解决方案。

＆＃13;

input[type="text"]:hover+.popup{
  display: block;
}
.popup {
  display: none;
}

＆＃13;

Answer 3

这是另一种实现你想要的方法，即使你有一个以上的兄弟div为你的popover你可以显示相同的结果。（因为将来你可以在同一个父母中添加其他元素那个popover div）。你的代码不会被限制在你的div里面的div的索引或者父亲的第一个我们的第二个孩子。

$(document).ready(function() {
  $(':input[type="text"]').hover(function() {
    $('#popover').show();
  }, function() {
    $('#popover').hide();
  });
});

#popover {
  display: none;
  position: absolute;
  border: 1px solid #000;
  top: 21px;
  background-color: #efefef;
}
.parent {
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <input type="text" size="5" maxlength="5" />
  <div>sample text</div>
  <div>sample text</div>
  <div id="popover">Small text popover</div>
  <div>sample text</div>
  <div>sample text</div>
  <div>sample text</div>
</div>

Jquery - 在元素悬停后显示div

3 个答案: