Как получить текст этого элемента, а не ребенка

Question

Я хочу скрыть только текст First Text, используя (opacity:0), когда я курсирую над topblock.

<div class="topblock"> 
    First Text 
    <div class="block"> 
     Inner Text 
    </div> 
</div> 

Но когда я использую следующий код JQuery я получаю ребенка DIV текст также First Text Inner Text

$(".topblock").on("mouseenter",function(){ 
    console.log($(this).text()); 
    $(this).css({"opacity":"0"}) 
}).on("mouseleave",function(){ 

}); 

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 в пролете и скрыть промежуток, когда мышь ввести блок topblock

Answer 3

невозможно сделать с помощью 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'); 
 
    });

.topblock .block, .black { 
 
    color: black !important; 
 
} 
 

 
.white { 
 
    color: white; 
 
}

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