Добавить Скрыть/Показать функциональность стиль HTML (не в CSS ДОКУМЕНТ)

Question

У меня есть класс узла определяется следующим образом в части стиля моего HTML:

<style> 
.node { 
    cursor: pointer; 
} 

.node circle { 
    fill: #fff; 
    stroke: steelblue; 
    stroke-width: 1.5px; 
} 

.node text { 
    font: 10px sans-serif; 
} 
</style> 

Мой вопрос, могу я, возможно, добавить скрыть текст функциональность при наведении мыши в этом разделе стиля/что будет выглядеть эта реализация. Я знаю, что могу добавить его в CSS или что-то еще, но этот класс узлов написан для уже существующего js и html-кода из библиотеки визуализации сторонних графиков, поэтому я хотел бы изменить остальную часть кода так же мало, как возможно, так как я не слишком хорош в web-dev. Как, может быть, добавить func на узел каким-то образом? (Как я уже сказал, что я ужасен в webdev)

Это должно быть в течение 6 часов, поэтому любая помощь будет отличной TY!

Answer 1

Вы можете попробовать css:

.node:hover { 
    display: none; 
} 

Но это даст вам некоторые глюк эффекты:

https://jsfiddle.net/zpe8t6r6/

Answer 2

Вы можете написать:

$(function(){ 
    $('css selector').mouseover(function() { 
    $(this).visiblity('hidden'); 
    }); 
}); 

Answer 3

Я нашел способ избегайте проблемы с глюком с зависанием, и все css bas ed:

вы должны играть с правилами svg и обновлять цвет текста до прозрачного на зависании.

DEMO:

$(".node text").mouseenter(function(){ 
 
    $(this).attr("fill","transparent"); 
 
}).mouseleave(function(){ 
 
    // YOUR TEXT COLOR HERE 
 
    $(this).attr("fill","#000"); 
 
    // if you want it to default : 
 
    //$(this).attr("fill",""); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<style> 
 
.node { 
 
    cursor: pointer; 
 
} 
 

 
.node circle { 
 
    fill: #fff; 
 
    stroke: steelblue; 
 
    stroke-width: 1.5px; 
 
} 
 

 
.node text { 
 
    font: 30px sans-serif; 
 
    font-weight: bold; 
 
} 
 
</style> 
 

 
<div class="node"> 
 
    <svg width="300" height="150"> 
 
    <text x="35" y="40">mouse hover it</text> 
 
    <circle cx="150" cy="100" r="20"></circle> 
 
    </svg> 
 
</div>