Question

我有一个缩略图页面 - 当我将鼠标悬停在每个缩略图上时，会显示一个文本框。当我将鼠标移开时，该框应该消失。当我对它进行硬编码时，一切运行良好。但是，当我尝试使用动态变量时，它会显示但不会隐藏文本框

这是我的代码

$(function() {

$('[id^=trigger]').hover(function () {
var roll =  this.id.replace(/trigger/, 'roll');
      $('#' + roll).show();
      }, function() { 
      $('#' + roll).hide(); 
});

}）;

这是我的HTML

<div id='trigger".$id."' style='width:300px;height:200px;'><img src='http://www.example.com/uploads/".$id."/0.jpg'></div><div id='roll".$id."' style='background-color:#ffffff;display:none;width:284px;position:absolute;top 300px;padding:8px;'><h1 class='h1box'>$title</h1><p class='pbox'$text</p></div>

所以基本上每个图像的id都是trigger1，触发器2等，对于文本框roll1，roll2等

我哪里错了？提前致谢

Answer 1

它不起作用，因为roll中的mouseleave未定义。那是因为您只在mouseenter中进行设置。您必须在mouseleave函数中定义相同的变量：

＆＃13;

$(function() {
  $('[id^=trigger]').hover(function() {
    var roll = this.id.replace(/trigger/, 'roll');
    $('#' + roll).show();
  }, function() {
    var roll = this.id.replace(/trigger/, 'roll');
    $('#' + roll).hide();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='trigger1' style='width:300px;height:200px;'>
  <img src='https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=300&h=200'>
</div>
<div id='roll1' style='background-color:#ffffff;display:none;width:284px;position:absolute;top 300px;padding:8px;'>
  <h1 class='h1box'>title</h1>
  <p class='pbox'>
    test
  </p>
</div>

＆＃13;

jQuery hover - 具有动态ID的div - 鼠标悬停工作，mouseout不

1 个答案: