我如何使這種懸停效果（懸停1按鈕來更改元素的ID，然後當它展開它變回它的原始ID？）[jquery，css3]

Question

所以我有一個段最初有一個ID： #main

和我有一個按鈕：＃Button1的

所以，我希望發生的是，當我在周圍徘徊按鈕，我想更改段落的ID爲：#intro

（其中有CSS3風格）

當我將鼠標懸停在按鈕上它應該改變p aragraph的ID爲：#outro

（這也CSS3風格）

，我不喜歡這樣的：

JS

$(document).ready(function(){ 
    $("#button1").hover(function(){ 
     $("#main").attr("id","intro"); 
    },function(){ 
     $("#intro").attr("id","outro"); 
    }); 
}); 

CSS

#main{ 
    color:red; 
} 
#intro{ 
    -webkit-animation: recolor .5s; 
    color:blue; 
} 
@-webkit-keyframes recolor { 
    from{ 
     color:red; 
    } 
    to{ 
     color:blue; 
    } 
} 
#outro{ 
    -webkit-animation: recolorout .5s; 
    color:red; 
} 
@-webkit-keyframes recolorout { 
    from{ 
     color:blue; 
    } 
    to{ 
     color:red; 
    } 
} 

這是工作，問題是我只能做一次。我知道，因爲我沒有改回#main

，但在哪裏它把這個一個：

$("#outro").attr("id","main"); 

，這樣它會懸停處理後更改段回其初始狀態？

還是有其他解決方案嗎？在此先感謝

This is the js fiddle.

Answer 1

請參閱本撥弄着一個工作示例：http://jsfiddle.net/chantastic/rGc7h/1/

修改通過類

更改ID是要使它很難找回原來的狀態，沒有地方保持它在你的JavaScript。最好的辦法是將要添加修改類你樣式表：

#main { /* base styles */ } 
#main.intro { /* intro overrides */ } 
#main.outro { /* outro overrides */ } 

有了這些之後，就可以使用.addClass()加入正確的類權事件。

$('#button1').mouseenter(function() { 
    $('#main').addClass('intro'); 
}); 

不要忘記刪除舊班！

如果只做到上面，你會添加類將永遠呆在那裏。這不是你想要的。您需要刪除'.intro'，以便添加'.outro'並讓這些樣式接管。

$('#button1').mouseenter(function() { 
    $('#main')revomeClass().addClass('intro'); 
}); 

空.removeClass()將刪除所有類。所以要注意這一點。在這種情況下，這正是我們想要的。

使用.mouseenter/.mouseleave事件，而不是.hover

這是個人喜好。我發現以後閱讀和理解會更容易。在幕後，jQuery將.hover()轉換爲.mouseenter和.mouseleave事件。

這是最後的結果是：

$(document).ready(function(){ 
    $main = $('#main') 
    $button1 = $('#button1') 

    $button1.mouseenter(function() { 
    $main.removeClass().addClass('intro'); 
    }); 

    $button1.mouseleave(function() { 
    $main.removeClass().addClass('outro'); 
    }); 
}); 

有了這個解決方案，「.outro」類將保持不變，直到你將鼠標懸停在該按鈕一次。

結合上面的樣式聲明，它的工作原理與您現在希望的一樣，並且稍後易於更改。

再次，這裏是一個工作小提琴：http://jsfiddle.net/chantastic/rGc7h/1/

Answer 2

你不應該使用ID來改變元素的造型來。嘗試使用類來代替。這將防止需要根據事件是否已被觸發來更改任何代碼。

$(document).ready(function(){ 

    $("#button1").hover(function(){ 
     $("#main").addClass('intro').removeClass('outro').removeClass('main'); 
    }, 
    function(){ 
     $("#main").addClass('outro').removeClass('intro');; 
    }); 
}); 

CSS：

.main{ 
    color:red; 
} 

.intro{ 
    -webkit-animation: recolor .5s; 
    color:blue; 
} 

@-webkit-keyframes recolor { 
    from{ 
     color:red; 
    } 
    to { 
     color:blue; 
    } 
} 

.outro{ 
    -webkit-animation: recolorout .5s; 
    color:red; 
} 

@-webkit-keyframes recolorout { 
    from{ 
     color:blue; 
    } 
    to{ 
     color:red; 
    } 
} 

Answer 3

而不是使用jQuery週期懸停效果，爲什麼不使用CSS？

http://jsfiddle.net/JtKFk/

HTML：

<p class="hoverable">hello world this is a test</p> 

CSS：

.hoverable{ 
    -webkit-animation: recolorout .5s; 
    color:red; 
} 

.hoverable:hover{ 
    -webkit-animation: recolor .5s; 
    color:blue; 
} 

@-webkit-keyframes recolor { 
    from{ 
     color:red; 
    } 
    to{ 
     color:blue; 
    } 
} 

@-webkit-keyframes recolorout { 
    from{ 
     color:blue; 
    } 

    to{ 
     color:red; 
    } 
} 

Answer 4

CODE：

$("#button1").mouseenter(function(){ 
$("#main").addClass("intro"); 
}).mouseleave(function(){ 
    $("#main").removeClass("intro");}); 

CSS：

#main { 
color:red; 
} 

.intro {-webkit-animation：recolor。5秒; 顏色：藍色; } @ -webkit關鍵幀重新着色{ 從{ 顏色：紅; } 到{ 顏色：藍; } } .outro { -webkit動畫：recolor1，5S; 顏色：紅色; } @ -webkit關鍵幀recolor1 { 從{ 顏色：藍; } 至{ 顏色：紅色; } }

http://jsfiddle.net/7eBCS/2/

Answer 5

，如果你扭轉DOM中的順序，你可以這樣做：

​​

http://jsfiddle.net/7eBCS/3/

並沒有這一招太：

<p id="main">This should change the pharagraph within mouseenter/mouseleave</p> 

</button> 




#button1 { 
position:relative; 

} 

p{ 
position:absolute; 
top:200%; 
width:400px; 
} 


    #button1:hover > p{ 
    color:red; 

    } 

http://jsfiddle.net/7eBCS/4/