当我将First Text
鼠标悬停在opacity:0
上时,我想仅使用topblock
隐藏文字<div class="topblock">
First Text
<div class="block">
Inner Text
</div>
</div>
。
First Text Inner Text
但是当我使用以下jQuery代码时,我还得到了儿童DIV文本$(".topblock").on("mouseenter",function(){
console.log($(this).text());
$(this).css({"opacity":"0"})
}).on("mouseleave",function(){
});
k = (512 + 448 - (l mod 512 + 1)) mod 512
答案 0 :(得分:3)
在不修改HTML结构的情况下执行所需操作将非常困难,因为您需要修改textNode
直接保存First text
值。
相反,修改HTML以将该文本包装在另一个元素(例如span
)中并对该元素执行操作会更简单。试试这个:
<div class="topblock">
<span>First Text</span>
<div class="block">
Inner Text
</div>
</div>
$(".topblock").on("hover",function(){
$(this).find('span').toggle();
});
答案 1 :(得分:1)
你不能隐藏街区的一部分。您可以将First text
放在一个范围内,并在鼠标进入顶块块时隐藏范围
答案 2 :(得分:1)
无法使用opacity
,但您可以通过将color
设置为与悬停时的背景颜色相匹配来完成此操作。
此处了解如何在悬停其.topblock
孩子时悬停.block
除之外的效果。请注意使用CSS !important
:
$('.topblock').hover(
function() {
$(this).addClass('white');
},
function() {
$(this).removeClass('white');
});
$('.block').hover(
function() {
$('.topblock').addClass('black');
},
function() {
$('.topblock').removeClass('black');
});
&#13;
.topblock .block, .black {
color: black !important;
}
.white {
color: white;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topblock">
First Text
<div class="block">
Inner Text
</div>
</div>
&#13;