Question

我想创建一个效果，用户将鼠标移到LI上，其内部的textarea将为fadeIn，当用户存在LI时，textarea将为fadeOut。但是，使用我附加的代码，似乎一旦用户将鼠标移动到textarea，它就会消失，但它仍然是UL的一部分。

HTML

<ul>
    <li>
      <div>Title</div>
      <div>Caption</div>
      <textarea></textarea>
    </li>
    <li>
      <div>Title</div>
      <div>Caption</div>
      <textarea></textarea>
    </li>
  </ul>

的jQuery

$(function() {
  $("ul li").hover(
     function() {
        $("textarea" , $(this)).fadeIn();
     },
     function() {
        $("textarea" , $(this)).fadeOut();
     }
  );
});

CSS

  ul {
    list-style: none;
  }
  li {
    float:left; 
    width:800px;
    background:#ccc;
  }
  li div {
    float:left;
    margin-right:30px;
    height:150px;
  }
  textarea {
    display:none;
    width: 100px;
    height: 30px;
    resize: none;
    border: 3px solid #cccccc;
    padding: 5px;
}

Answer 1

这是working example。

请注意，它使用的是jquery 1.4.3

使用mouseenter列出项目

1 个答案: