当另一个div被占用时切换div的内容 [英] Switch content of div when another div gets hovered on
问题描述
我无法像这样工作。我有一系列的DIVS(1到8),当你将鼠标悬停在一个div上时,我想用#replace(当前设置为隐藏)$ b的内容从字面上更改其中一个div的内容$ b < div id =replacestyle =visibility:hidden;> Bla Bla Bla< / div>
以下是我到目前为止:
$('#1')。on {
mouseover:function(){
$('#2')。replaceWith(jQuery('#replace'));
},
mouseleave:function(){
$('#2')。replaceWith(jQuery('#2'));
},
click:function(){
$('#2') .replaceWith(jQuery('#replace'));
$('#1')。off('mouseleave mouseover');
}
});
根本没有效果 - 我的逻辑不好,我做得不好,等等...?
jsBin demo
< div class =box >这是DIV#1 :)< / div>
为您的所有人添加一个类 .box
8元素和做:
$ $ p $ jQuery(函数($){
var replaceText = $(' ();
var memorizeText ='';
$ b $('。box')。on({
mouseenter:function(){
memorizeText = $(this).next('。box')。text(); //记忆文本
$(this).next('.box').text(replaceText);
),
mouseleave:function(){
$(this).next('。box')。text(memorizeText); //恢复记忆文本
},
点击:function(){
$(this).next('。box')。text(replaceText);
$(this).off('mouseleave mouseenter');
}
});
});
I'm having trouble getting something like this to work. I've got a series of DIVS (1 through 8) and when you hover over one div, I want to literally change the contents of one of the other divs with the contents of #replace (which is current set to hidden)
<div id="replace" style="visibility:hidden;">Bla Bla Bla</div>
Here is what I've got so far:
$('#1').on({
mouseover: function(){
$('#2').replaceWith(jQuery('#replace'));
},
mouseleave: function(){
$('#2').replaceWith(jQuery('#2'));
},
click: function(){
$('#2').replaceWith(jQuery('#replace'));
$('#1').off('mouseleave mouseover');
}
});
Not really having an effect at all - so is my logic bad, how i'm doing it bad, etc...?
jsBin demo
<div class="box">This is DIV #1 :) </div>
Add a class .box
to all your 8 elements and do:
jQuery(function($){
var replaceText = $('#replace').text();
var memorizeText = '';
$('.box').on({
mouseenter: function(){
memorizeText = $(this).next('.box').text(); // memorize text
$(this).next('.box').text(replaceText);
},
mouseleave: function(){
$(this).next('.box').text( memorizeText ); // restore memorized text
},
click: function(){
$(this).next('.box').text( replaceText );
$(this).off('mouseleave mouseenter');
}
});
});
这篇关于当另一个div被占用时切换div的内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!