显示#id - 当悬停另一个#id时隐藏#id [英] Show #id - hide #id when hover another #id

问题描述

如何使jQuery成为这样：

How can make in jQuery something like this:

< div id =principal-id>< / div> //这是显示的主要内容

<div id="principal-id"></div> // this is principal id what is displayed

< div id =hover-id>< ; / div> //当我悬停#hover-id时我希望＃principal-id消失并更改为
< div id =this- ID>< / DIV> 。
但是当我用＃this-id上的光标停止更改时，以及当光标移到外面时恢复正常会是一种方式吗？

<div id="hover-id"></div> // when I hover #hover-id I want the #principal-id to disappear and change with <div id="this-id"></div>. But is a way when I'm with cursor on #this-id to stop change, and when the cursor is moved outside return to normal?

I希望你理解......

I hope you understand...

谢谢！

推荐答案

这是一点清洁：

<div id="hover-id" style="border:1px solid black">hover over me</div>

<div id="principal-id">normal</div>
<div id="this-id" style="display:none">replacement</div>

var hover = function(){
    $('#principal-id').toggle();
    $('#this-id').toggle();
};

$('#hover-id').mouseenter(hover).mouseleave(hover);

如下： http://jsfiddle.net/HQQAV/

这篇关于显示#id - 当悬停另一个#id时隐藏#id的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！