问题描述
我使用了带有两个分区的圆形 SVG 文件,当我将鼠标悬停在选定区域上时,我想显示和隐藏文本。我在鼠标悬停时确实显示了文本,但是当我隐藏它时它仍然无法正常工作。我曾尝试只使用 CSS,但没有奏效。
我想要的是先显示 #g0(text) 然后当我将鼠标悬停在每个 #g1(area) 和 #g2 上时显示 #text-r-1(text) 和 #text-r-2(text) (区域),并使 #g0(text) 隐藏。当我将鼠标移出每个 #g1(area) 和 #g2(area) 时,再次显示 #g0(text)。
我很抱歉解释得很好,但我真的需要你的帮助! :o
<svg id="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1142.28 1142.28">
<g id="g0">
<text id="text-0" x="50%" y="50%" text-anchor="middle" dy=".3em" font-size="50px" > I want to hide this </text>
</g>
<g id="g1">
<text id="text-r-1" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf" stroke-width="0px" dy=".3em" font-size="50px"> AAA </text>
<path id="r-1" d="M747.32,313.17,778.87,361A366.07,366.07,1,988,295.77V238.46a423.07,423.07,0-240.68,74.71Z" transform="translate(-416.92 -92.49)" fill="none" stroke="#000" stroke-miterlimit="10"/>
</g>
<g id="g2">
<text id="text-r-2" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf" stroke-width="0px" dy=".3em" font-size="50px"> BBB </text>
<path id="r-2" d="M988.06,295.77c203.16,367.86,164.7,367.86s-164.7,367.85-367.86,367.85S620.2,866.79,620.2,663.63C620.2,538.18,683,427.4,361l-31.55-47.84c-111.39,76.66-184.42,205-184.42,350.46,234.81,190.35,425.16,425.16s425.16-190.35,425.16-425.16S1222.87,238.46,988.06,238.46H988v57.31Z" transform="translate(-416.92 -92.49)" fill="none" stroke="#000" stroke-miterlimit="10"/>
</g>
----------------
svg{
width:550px;
}
path{
stroke-width:0.5px;
}
svg text{
font-size:30px;
}
path#r-1{
fill: #FF313F;
transition: all 0.5s;
}
path#r-2{
fill: #EBA7A7;
transition: all 0.5s;
}
svg #text-r-1 {display: none;}
svg #g1:hover #text-r-1 {display: block;}
svg #g1:hover path#r-1 {fill:#383838;}
svg #text-r-2 {display: none;}
svg #g2:hover #text-r-2 {display: block;}
svg #g2:hover path#r-2 {fill:#383838;}
.hhh {visibility:hidden;}
$(document).ready(function() {
$("#g1").hover(function() {
$(this).siblings("#g0").addClass("hhh");
},function() {
$(this).siblings("#g0").removeClass("hhh");
});
});
$(document).ready(function() {
$("#g2").hover(function() {
$(this).siblings("#g0").addClass("hhh");
},function() {
$(this).siblings("#g0").removeClass("hhh");
});
});
解决方法
您只能使用 CSS 来实现:您将所有文本的填充不透明度设置为 0。当您将鼠标悬停在组上时,您将内部文本的填充不透明度更改为 1。
您可以添加过渡效果以获得更好的效果。
text{fill-opacity:0}
g{pointer-events:all;}
g:hover text{fill-opacity:1}
<svg id="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1142.28 1142.28">
<g id="g0">
<text id="text-0" x="50%" y="50%" text-anchor="middle" dy=".3em" font-size="50px" > I want to hide this </text>
</g>
<g id="g1">
<text id="text-r-1" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf" stroke-width="0px" dy=".3em" font-size="50px"> AAA </text>
<path id="r-1" d="M747.32,313.17,778.87,361A366.07,366.07,1,988,295.77V238.46a423.07,423.07,0-240.68,74.71Z" transform="translate(-416.92 -92.49)" fill="none" stroke="#000" stroke-miterlimit="10"/>
</g>
<g id="g2">
<text id="text-r-2" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf" stroke-width="0px" dy=".3em" font-size="50px"> BBB </text>
<path id="r-2" d="M988.06,295.77c203.16,367.86,164.7,367.86s-164.7,367.85-367.86,367.85S620.2,866.79,620.2,663.63C620.2,538.18,683,427.4,361l-31.55-47.84c-111.39,76.66-184.42,205-184.42,350.46,234.81,190.35,425.16,425.16s425.16-190.35,425.16-425.16S1222.87,238.46,988.06,238.46H988v57.31Z" transform="translate(-416.92 -92.49)" fill="none" stroke="#000" stroke-miterlimit="10"/>
</g>
</svg>
更新
OP 正在评论:
鼠标移开 g1 和 g2 时如何显示“g0”?
一个可能的解决方案是将 g0
移动到 svg 元素的末尾并使用 ~
选择器(Subsequent-sibling Combinator):{{1 }}
g:hover ~ #g0 text{fill-opacity:1}
text{fill-opacity:0}
g{pointer-events:all;}
g:hover text{fill-opacity:1}
g:hover ~ #g0 text{fill-opacity:1}
首先,您使用 jQuery 语法而没有在您的项目中绑定它 - 所以它无法工作。
其次,您的 JavaScript 不需要两个 $( document ).ready()
,只需使用一次即可。
第三,您可以在一个选择器中同时选择 #g1
和 #g2
。
这是一种快速的工作方式:
$(function() {
$("#g1,#g2").hover(function() {
$("#g0").addClass("hhh");
},function() {
$("#g0").removeClass("hhh");
});
});
svg {
width: 550px;
}
path {
stroke-width: 0.5px;
}
svg text {
font-size: 30px;
}
path#r-1 {
fill: #FF313F;
transition: all 0.5s;
}
path#r-2 {
fill: #EBA7A7;
transition: all 0.5s;
}
svg #text-r-1 {
display: none;
}
svg #g1:hover #text-r-1 {
display: block;
}
svg #g1:hover path#r-1 {
fill: #383838;
}
svg #text-r-2 {
display: none;
}
svg #g2:hover #text-r-2 {
display: block;
}
svg #g2:hover path#r-2 {
fill: #383838;
}
.hhh {
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg id="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1142.28 1142.28">
<g id="g0">
<text id="text-0" x="50%" y="50%" text-anchor="middle" dy=".3em" font-size="50px" > I want to hide this </text>
</g>
<g id="g1">
<text id="text-r-1" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf" stroke-width="0px" dy=".3em" font-size="50px"> AAA </text>
<path id="r-1" d="M747.32,74.71Z" transform="translate(-416.92 -92.49)" fill="none" stroke="#000" stroke-miterlimit="10"/>
</g>
<g id="g2">
<text id="text-r-2" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf" stroke-width="0px" dy=".3em" font-size="50px"> BBB </text>
<path id="r-2" d="M988.06,238.46H988v57.31Z" transform="translate(-416.92 -92.49)" fill="none" stroke="#000" stroke-miterlimit="10"/>
</g>
</svg>
$( "#g1").hover(function() {
$(this).prevAll().slice(0,1).addClass('hhh');
},function() {
$(this).prevAll().slice(0,1).removeClass("hhh");
});
$("#g2").hover(function() {
$(this).prev().prevAll().slice(0,2).addClass('hhh');
},2).removeClass("hhh");
});
svg {
width: 550px;
}
path {
stroke-width: 0.5px;
}
svg text {
font-size: 30px;
}
path#r-1 {
fill: #FF313F;
transition: all 0.5s;
}
path#r-2 {
fill: #EBA7A7;
transition: all 0.5s;
}
svg #text-r-1 {
display: none;
}
svg #g1:hover #text-r-1 {
display: block;
}
svg #g1:hover path#r-1 {
fill: #383838;
}
svg #text-r-2 {
display: none;
}
svg #g2:hover #text-r-2 {
display: block;
}
svg #g2:hover path#r-2 {
fill: #383838;
}
.hhh {
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg id="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1142.28 1142.28">
<g id="g0">
<text id="text-0" x="50%" y="50%" text-anchor="middle" dy=".3em" font-size="50px" > I want to hide this </text>
</g>
<g id="g1">
<text id="text-r-1" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf" stroke-width="0px" dy=".3em" font-size="50px"> AAA </text>
<path id="r-1" d="M747.32,238.46H988v57.31Z" transform="translate(-416.92 -92.49)" fill="none" stroke="#000" stroke-miterlimit="10"/>
</g>
</svg>