添加隱藏/顯示功能的HTML樣式（而不是在CSS文件）

我有一個節點類定義爲我的HTML風格的部分如下：添加隱藏/顯示功能的HTML樣式（而不是在CSS文件）

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

來源

2015-10-15 Raul Puri

「圓」和「文本」是HTML元素？他們從http://www.w3.org/TR/html-markup/elements.html – nicolallias

@nicolallias我想這是svg元素 –

你可以嘗試css：

.node:hover { 
    display: none; 
}

但它會給你一些小故障的影響：

https://jsfiddle.net/zpe8t6r6/

來源

2015-10-15 09:58:26 Tirzono

你可以使用'opacity：0;'代替 –

類似於你工作的東西 –

你可以寫：

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

來源

2015-10-15 09:58:14

你應該避免JavaScript（尤其是jQuery），當一行css做的伎倆 – Apolo

我找到了一種方法來避免懸停和所有CSS基礎的「毛刺」問題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>

來源

2015-10-15 10:28:31 Apolo

添加隱藏/顯示功能的HTML樣式（而不是在CSS文件）

回答

相關問題