Question

当我将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

Answer 1

在不修改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();
});

Answer 2

你不能隐藏街区的一部分。您可以将First text放在一个范围内，并在鼠标进入顶块块时隐藏范围

Answer 3

无法使用opacity，但您可以通过将color设置为与悬停时的背景颜色相匹配来完成此操作。

此处了解如何在悬停其.topblock孩子时悬停.block 除之外的效果。请注意使用CSS !important：

＆＃13;

$('.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;

如何获取此元素的文本而不是子元素

3 个答案: