当我鼠标按下按钮时,我想要显示一些默认内容。
<div class="parent">
<div class="button"></div>
<div class="button"></div>
<div class="content-container">
<div class="content"></div>
</div>
</div>
<div class="parent">
<div class="button"></div>
<div class="button"></div>
<div class="content-container">
<div class="content"></div>
</div>
</div>
我的javascript
$(".button").mouseover(function(){
$(".content-container").eq(depends on parent number).append("<div class='content'>" + value + '</div>');
}).mouseout(function(){$(".content").remove();});
让我的问题清楚。 当用户鼠标事件在.parent中按钮时,它只会删除内容或将内容添加到父容器中。
我还需要一个解决方案来设置鼠标输出时的默认内容,否则内容div将为空白。
提前感谢。
答案 0 :(得分:1)
我不确定我是否理解这个问题,但这里有一些可能会有所帮助的事情:
使用类来设置样式,而不是识别。
如果你有html部分你想改变放在一个
<div id="my_default_content">..some content...</div>
现在假设您有一个按钮,并且您想要删除内容:
<button onclick="function() {$('#my_default_content').css('visibility', 'none')}">Clear</button>
或者您可以通过将“可见性”设置为“可见”来再次显示内容。如果您希望div不占用空间,请将“display”设置为“none”。
希望这有帮助!
答案 1 :(得分:0)
$(".button").on({
mouseenter: function() {
var content = $('<div />', {text: this.value, 'class': 'content'});
$(this).siblings('.content-container').html(content);
},
mouseleave: function() {
var default = $('<div />', {text: 'Hello Kitty'});
$(this).siblings('.content-container').html(default);
}
});