添加隐藏/显示功能的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文件）

回答

相关问题