1

当一个人悬停在 div 上时，我想淡入和淡出多个元素。有一个标题和信息，当一个人将鼠标悬停在该特定标题上时，我希望标题淡出并且信息属于该标题以淡入。

这是代码：

$(document).ready(function(e) {
    if($(".info").is(":visible")) {
        $(".info").hide();
    }

    $(".title").mouseenter( function() {
        $(this).fadeOut(100);
        $(this).$(".info").fadeIn(100);
    })
    $(".info").mouseleave( function() {
        $(this).fadeOut(100);
        $(this).$(".title").fadeIn(100);
    })

});

我的问题是：如何使属于该标题的信息而不是所有其他信息淡入。

这是它有一点 php 的 HTML

<div class="holder">

            <div class="title">
                <img alt="random" src="pictures/<?php echo $company['picture']; ?>" height="100" width="100">
                <p><a href="profile.php?company=<?php echo $company['id']; ?>"><?php echo $company['title']; ?></a></p>
            </div>

            <div class="info">
                <p><a href="profile.php?company=<?php echo $company['id']; ?>"><?php echo $company['message']; ?></a></p>
            </div>

        </div>
4

4 回答 4

1

尝试这个

$(document).ready(function(e) {
  if($(".info").is(":visible")) {
    $(".info").hide();
  }

  $(".title").mouseenter( function() {
     $(this).fadeOut(100);
     $(this).next(".info").fadeIn(100);
   });

   $(".info").mouseleave( function() {
     $(this).fadeOut(100);
     $(this).prev(".title").fadeIn(100);
   });

});
于 2012-08-05T15:11:24.517 回答
0

你可以用更少的代码来做到这一点，比如这种不同的方法：

这是 jsFiddle 玩。

html:

<div class="title">
          <img src="http://www.hurriyet.com.tr/_np/2769/17512769.jpg" height="100" width="100">
          <p><a href="profile.php?company=<?php echo $company['id']; ?>"><?php echo $company['title']; ?></a></p>

          <div class="info">
                <p>here is some info.here is some info.here is some info.</p>
          </div>
 </div>

------------------

jQuery：

$(document).ready(function() {

    $('.title').bind({
        mouseenter: function() {
            $(this).children(".info").stop(false,true).fadeIn(100);
        }, mouseleave: function() {
            $(this).children(".info").stop(false,true).fadeOut(100);
            $(this).fadeIn(100);
        }
    });

});​

------------------

CSS：

.info { display:none; }
于 2012-08-05T15:35:07.757 回答
0

最好的办法是只给.holder元素样式和大小，并以.holder元素为目标，因为这样可以很容易地淡入和淡出它的子元素，而不会改变大小和消失的元素弄乱事件处理程序，并且您可以将子元素作为目标每个.holder功能的合一功能，而无需在 DOM 树上上下遍历太多：

CSS：

.holder {position: relative; 
         height: 140px; 
         width: 100px;
        }​

js：

$(function() {
    $(".info").hide(); //no need to check if the class is visible

    $(".holder").on('mouseenter mouseleave', function() {
        $('.info, .title', this).fadeToggle(100);
    })
});​

小提琴

于 2012-08-05T16:05:45.150 回答
0

您要做的是专门针对元素，如果它们始终按此顺序排列，则可以使用：

$(this).next().fadeIn(100);

然后回到标题，你可以使用

$(this).prev();

从信息

于 2012-08-05T15:11:43.563 回答