Question

我希望在我的页面上为菜单实现鼠标悬停事件 -

我左边有3个标题，右边有相应的内容div，相关文字出现在那里。

在为所有论坛寻找工作的js解决方案之后，我已经确定了：

http://flowplayer.org/tools/demos/tabs/mouseover.html

使用非常简单的js函数：

$("#products").tabs("div.description", {event:'mouseover'});

我希望做的是合并一个fadeIn（），fadeOut效果，这样当用户将鼠标悬停在页面左侧的标题上时，现有的内容会逐渐消失，相应的内容会淡入观看......

html编码是：

<div id="products" >

<img src="home.png" alt="home" />

<img src="services.png" alt="services" /> 

<img src="contact.png" alt="contact" /> 

</div>

<div class="description" id="home" >
 .. content .. 
</div>

<div class="description" id="services" >
 .. content .. 
</div>

<div class="description" id="contact" >
 .. content .. 
</div>

我试图在这个网站上加入线程5404775，但根本无法让它正常工作！

任何帮助非常感谢

Answer 1

以下内容可在jsfiddle上看到。

你可以像鼠标一样淡入淡出它们

var _current = "home"; // default state

$('#products img').mouseover(function (){

    // The one we want to show now
    var id= $(this).attr('alt');

    // We don't need to do anything if it's the same one that's already
    // there
    if (_current !== id){

        $('#' + _current).fadeOut(function(){
            // Fade in the new one after the old fades out
            $('#' + id).fadeIn();
            // Update state
            _current = id;
        });
    }
});

我还添加了一些东西，以确保在页面加载时只显示您想要首先显示的那个。我假设它将是家庭div。

将此添加到CSS

.hidden{
    display:none;
}

并将该课程放在其他div上。

<div class="description hidden" id="services" >
 .. services.. 
</div>

<div class="description hidden" id="contact" >
 .. contact .. 
</div>

Answer 2

这可能有效：

$("img", "#products").hover(function() {

    var id = $(this).attr("alt");
    $("#" + id).fadeIn("slow");

}, function() {

    var id = $(this).attr("alt");
    $("#" + id).fadeOut("slow");

});

Answer 3

另一个想法（没有Jquery）：你可以使用CSS opacity:x属性（对于firefox）或filter:alpha(opacity=x)（对于IE）来改变元素的不透明度。可以通过一个小的减速周期来获得淡入/淡出。

另见：

http://www.w3schools.com/css/css_image_transparency.asp

Answer 4

我假设您希望人们将鼠标悬停在此处的图像按钮上，以使相应的div淡入和淡出。他们在该网站上所做的事情将无法正常工作，因为褪色效果需要Javascript。 JQuery使这很容易。我建议尝试像

这样的东西

<script type="text/javascript">
oldSelected = "home"
$(document).ready(function(){
  $("#products img").mouseover(function(){
    $(".description").stop(true, true);
    var newSelected = $(this).attr("alt");
    $("#" + oldSelected).fadeOut('normal',function(){
      $("#" + newSelected).fadeIn();
    });
    oldSelected = newSelected
  });
});
</script>

我测试了这个并且它有效。你要确定的一件事是div的css将它们设置为在开始时不可见，除非你想要其中一个可见，在这种情况下，该div的id应该是你设置oldSelected的id在功能开始时。

享受！

淡入/淡出js mouseover事件

4 个答案: