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

时间:2015-05-30 22:47:58

标签: javascript jquery css

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

3 个答案:

答案 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

&#13;
&#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;
&#13;
&#13;