将鼠标悬停在框上时淡入背景 [英] Fade a background in when you mouseover a box

问题描述

我之前曾问过这个客人.但是现在，我将尝试更加具体一些.

当您将鼠标悬停在一个框上时，我试图使背景淡入.我尝试了2种不同的选择.

选项1: Box1是鼠标悬停的框，hover1是传入的新背景.这实际上效果很好.但是，它加载了一个字句，即，如果我只是将鼠标悬停在盒子上而发疯，即使鼠标静止不动，褪色也会持续不断.有什么办法可以阻止它吗? 内容是当我将鼠标悬停在内容框中时会更改的文本.这很好.

$("#box1").mouseover(function(){
    $("#background").switchClass("nohover", "hover1", 500);
    $("#content").html(box1);

});

$("#box1").mouseout(function(){
    $("#background").switchClass("hover1", "nohover", 150);
    $("#content").html(content);

});

选项2: 在这里，我添加了hover2类，并要求它淡入淡出.但这根本不起作用.有时，当我将鼠标移出包装盒时，它甚至可以去除侧面的所有物品.

$("#box2").mouseover(function(){
    $("#background").addClass("hover2").fadeIn("slow") 
    $("#content").html(box3);
});

$("#box2").mouseout(function(){
    $("#background").removeClass("hover2").fadeOut("slow")
    $("#content").html(content);
});

我使用jquery ui. 我真的希望有人能帮助我！

解决方案

您还可以尝试在标记/CSS中进行小的更改.

HTML:

<div id="box">
    <div id="background"></div>
    <div id="content"></div>
</div>

CSS:

#box {
    position: relative;
    /* ... */
}
#background {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    background-image: url(...);
    z-index: -1;
}​

JavaScript:

$("#box").hover(function() {
    $("#background").fadeIn();
}, function() {
    $("#background").stop().fadeOut();
});​

演示: http://jsfiddle.net/bRfMy/

I've asked this guestion before. But now I'll try to be a bit more specific.

I've trying to make a background fade in when you mouse over a box. I've tried 2 different options.

Option 1: Box1 is the box it mousesover, and hover1 is the new background that comes in. This actually works pretty well. However, it loads the acript, meaning, that if i just go crazy with my mouse over the box, the fadeing will continue endless, even when my mouse is standing still. Is there a way you can stop it? Content is a text that changes in a contentbox when I mouseover. This worksfine.

$("#box1").mouseover(function(){
    $("#background").switchClass("nohover", "hover1", 500);
    $("#content").html(box1);

});

$("#box1").mouseout(function(){
    $("#background").switchClass("hover1", "nohover", 150);
    $("#content").html(content);

});

Option 2: Here i add the class hover2 and asks it to fadeín and fadeout. But this doesn't work at all. Somtimes it even removes everything on the side when i take the mouseout of the box.

$("#box2").mouseover(function(){
    $("#background").addClass("hover2").fadeIn("slow") 
    $("#content").html(box3);
});

$("#box2").mouseout(function(){
    $("#background").removeClass("hover2").fadeOut("slow")
    $("#content").html(content);
});

I Use jquery ui. I really hope someone can help me!

解决方案

You can also try to make small changes in the markup/CSS.

HTML:

<div id="box">
    <div id="background"></div>
    <div id="content"></div>
</div>

CSS:

#box {
    position: relative;
    /* ... */
}
#background {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    background-image: url(...);
    z-index: -1;
}​

JavaScript:

$("#box").hover(function() {
    $("#background").fadeIn();
}, function() {
    $("#background").stop().fadeOut();
});​

DEMO: http://jsfiddle.net/bRfMy/

这篇关于将鼠标悬停在框上时淡入背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！