正文 

当前位置： 首页 > 源码 >

当我在 SVG 中将鼠标悬停时，如何显示和隐藏同级元素？

     2023-03-28     271

关键词：

【中文标题】当我在 SVG 中将鼠标悬停时，如何显示和隐藏同级元素？【英文标题】：How can I show and hide sibling element when I mouse over in SVG? 【发布时间】：2021-05-15 01:12:38 【问题描述】：

我使用了 SVG 文件，它是带有两个分割的圆形，当我将鼠标悬停在选定区域上时，我想显示和隐藏文本。当我鼠标悬停时我确实显示了文本，但是当我隐藏它时它仍然不起作用。我曾尝试只使用 CSS，但它不起作用。

我想要的是先显示#g0(text)，然后当我将鼠标悬停在每个#g1(area) 和#g2 上时显示#text-r-1(text) 和#text-r-2(text) （区域），并使#g0（文本）隐藏。当我将每个#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- dy=".3em" font-size="50px"> AAA </text>
        <path id="r-1" d="M747.32,313.17,778.87,361A366.07,366.07,0,0,1,988,295.77V238.46a423.07,423.07,0,0,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- dy=".3em" font-size="50px"> BBB  </text>
        <path id="r-2" d="M988.06,295.77c203.16,0,367.86,164.7,367.86,367.86s-164.7,367.85-367.86,367.85S620.2,866.79,620.2,663.63C620.2,538.18,683,427.4,778.87,361l-31.55-47.84c-111.39,76.66-184.42,205-184.42,350.46,0,234.81,190.35,425.16,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");
        );
);

【问题讨论】：

有 ID 时为什么要使用 siblings()？ 老实说，我不知道为什么要使用它。我对javascript一无所知，但是在看到上面的堆栈溢出中的javascript后，我尝试使用它：o 【参考方案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- dy=".3em" font-size="50px"> AAA </text>
            <path id="r-1" d="M747.32,313.17,778.87,361A366.07,366.07,0,0,1,988,295.77V238.46a423.07,423.07,0,0,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- dy=".3em" font-size="50px"> BBB  </text>
            <path id="r-2" d="M988.06,295.77c203.16,0,367.86,164.7,367.86,367.86s-164.7,367.85-367.86,367.85S620.2,866.79,620.2,663.63C620.2,538.18,683,427.4,778.87,361l-31.55-47.84c-111.39,76.66-184.42,205-184.42,350.46,0,234.81,190.35,425.16,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>

【讨论】：

非常感谢！！这就是我想要的:)【参考方案2】：

您只能使用 CSS 来实现：您将所有文本的填充不透明度设置为 0。当您将鼠标悬停在组上时，您会将内部文本的填充不透明度更改为 1。

您可以添加过渡以获得更漂亮的效果。

textfill-opacity:0
gpointer-events:all;
g:hover textfill-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- dy=".3em" font-size="50px"> AAA </text>
        <path id="r-1" d="M747.32,313.17,778.87,361A366.07,366.07,0,0,1,988,295.77V238.46a423.07,423.07,0,0,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- dy=".3em" font-size="50px"> BBB  </text>
        <path id="r-2" d="M988.06,295.77c203.16,0,367.86,164.7,367.86,367.86s-164.7,367.85-367.86,367.85S620.2,866.79,620.2,663.63C620.2,538.18,683,427.4,778.87,361l-31.55-47.84c-111.39,76.66-184.42,205-184.42,350.46,0,234.81,190.35,425.16,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）：g:hover ~ #g0 textfill-opacity:1

textfill-opacity:0
gpointer-events:all;
g:hover textfill-opacity:1

g:hover ~ #g0 textfill-opacity:1
<svg id="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1142.28 1142.28">


        <g id="g1">
        <text id="text-r-1" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf" stroke- dy="1.3em" font-size="50px"> AAA </text>
        <path id="r-1" d="M747.32,313.17,778.87,361A366.07,366.07,0,0,1,988,295.77V238.46a423.07,423.07,0,0,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- dy="1.3em" font-size="50px"> BBB  </text>
        <path id="r-2" d="M988.06,295.77c203.16,0,367.86,164.7,367.86,367.86s-164.7,367.85-367.86,367.85S620.2,866.79,620.2,663.63C620.2,538.18,683,427.4,778.87,361l-31.55-47.84c-111.39,76.66-184.42,205-184.42,350.46,0,234.81,190.35,425.16,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> 
  
  
        <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>
</svg>

【讨论】：

谢谢！但是，当我将 g1 和 g2 鼠标移出时，如何显示“g0”？因为如果我按照你教的那样使用 css，g0 将被隐藏。【参考方案3】： 

$( "#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');
, function() 
        $(this).prevAll().slice(0, 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- dy=".3em" font-size="50px"> AAA </text>
            <path id="r-1" d="M747.32,313.17,778.87,361A366.07,366.07,0,0,1,988,295.77V238.46a423.07,423.07,0,0,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- dy=".3em" font-size="50px"> BBB  </text>
            <path id="r-2" d="M988.06,295.77c203.16,0,367.86,164.7,367.86,367.86s-164.7,367.85-367.86,367.85S620.2,866.79,620.2,663.63C620.2,538.18,683,427.4,778.87,361l-31.55-47.84c-111.39,76.66-184.42,205-184.42,350.46,0,234.81,190.35,425.16,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>

【讨论】：

使用对象时如何在鼠标悬停时更改 SVG 笔触颜色

...ols手动更改笔触颜色，它可以正常工作。我确实注意到，当我使用对象加载svg时，我在 查看详情

将鼠标悬停在非同级 div 上时更改 SVG 样式

】将鼠标悬停在非同级div上时更改SVG样式【英文标题】：ChangeSVGstylingwhilehoveringovernon-siblingdiv【发布时间】：2014-06-3012:32:13【问题描述】：当鼠标悬停在页面其他位置的另一个分区上时，我希望能够更改内联svg徽标的样式。到目... 查看详情

jQuery SVG - 悬停元素

...悬停在圆圈上时，我想给出一点动画。它可以工作，但是当我在文本悬停状态上移动鼠标指针时关闭。这是正 查看详情

将鼠标悬停在图像上时如何更改 SVG 的颜色？

...述】：我有一张图片（带有链接）和中间的YouTube徽标。当我将图片悬停时，我希望YouTube徽标为红色。目前它不工作。我必须将鼠标悬停在徽标上才能改变颜色，我希望它在我将鼠标悬停在图像上时立即改变。这是一个示例（将... 查看详情

悬停按钮时如何更改svg颜色

...VG的颜色。我尝试使用button:hover+svg，但这似乎不起作用。当我运行CSS时，SVG填充为白色，当我将鼠标悬停在按钮上时它不起作用。我看到它工作的唯一方法是，如果我不将初始填充设置为橙色并让它变为黑色。怎么了？.b 查看详情

在悬停另一个元素时更改 SVG 填充颜色

...件来使其工作，以便我可以在外部设置它的样式。但是，当我实际将鼠标悬停在SVG本身上时，我只能让它工作。我在一个标签中有我的对象和一 查看详情

悬停时JQuery显示/隐藏

...1-07-2106:12:40【问题描述】：我有三个链接，猫、狗、蛇。当我将鼠标悬停在每个链接上时，与每个链接相关的内容应该会发生变化。因此，如果我将鼠标悬停在cat上，则会出现cat内容，如果我将鼠标悬停在dog上，则cat内容会平滑... 查看详情

鼠标悬停时的SVG工具提示？

】鼠标悬停时的SVG工具提示？【英文标题】：SVGtooltiponmousehover?【发布时间】：2015-05-1105:43:09【问题描述】：所以我有一个带有标记位置和多边形的SVG地图。使用CSS，这些区域比地图的其余部分更亮，并且在悬停时它们的颜色不... 查看详情

如何在鼠标悬停时隐藏左下角的网址显示？

】如何在鼠标悬停时隐藏左下角的网址显示？【英文标题】：HowToHideurldisplayinbottomleftonmouseover?【发布时间】：2014-04-1515:13:00【问题描述】：我有一个会员页面，必须登录。在此页面上，成员可以获得所进行讲座的链接。讲座链... 查看详情

鼠标悬停时如何将url隐藏在超链接中

】鼠标悬停时如何将url隐藏在超链接中【英文标题】：howcanurlbehiddeninhyperlinkwhenmousehover【发布时间】：2012-04-0817:33:25【问题描述】：当鼠标悬停在超链接上时，如何隐藏URL以不显示？<ahref="url">Hyperlink</a>当鼠标悬停时，... 查看详情

如何隐藏 UniformGrid 的悬停和单击事件？

...的按钮列表。在我遇到以下问题之前，一切似乎都很好。当我单击它或将鼠标悬停在它上面时，按钮的边距空间显示为浅蓝色。如何消除这种影响？这是我的代码：<ListBox 查看详情

当我使用 jquery 将鼠标悬停在图标上时如何显示一个简单的文本框

】当我使用jquery将鼠标悬停在图标上时如何显示一个简单的文本框【英文标题】：HowtoshowasimpletextboxwhenIhoveroveraniconusingjquery【发布时间】：2012-07-3116:08:19【问题描述】：我在html中有一个输入字段，该字段旁边有一个帮助图标(?)... 查看详情

将 css 悬停在 svg 上

...在尝试使用svg制作悬停效果。This是我想要达到的效果。当我在两条路径和文本上进行鼠标悬停时，我希望其他路径和文本具有较低的不透明度（我做了这部分），但我也希望出现百分比。当鼠标不在任何东西上时，我希望所有... 查看详情

d3.js - 当鼠标悬停在 SVG 容器上的这些元素上时，如何将光标设置为手？

...置这些圆圈上的鼠标悬停行为以打印简单的控制台消息。当我将鼠标悬停（和鼠标悬停）时，我会看 查看详情

Vuetify - 鼠标悬停时下拉菜单不突出显示

...Vuetify中创建了一个下拉菜单，但是虽然它可以工作，但当我将鼠标移过它们时，它并没有突出显示每个选项。我有一个屏幕截图来说明我的意思..鼠标指针丢失，但鼠标悬停在“我的设置”上。我的html和脚本代码如下。请问我 查看详情

JQuery在多个图像的鼠标悬停时切换可见性

...ery鼠标悬停功能时遇到问题。我有一些动态生成的图标，当我悬停时会显示隐藏的div，当我mouesout时会隐藏div。<divclass=\'lister1\'><imgsrc=\' 查看详情

悬停链接并在 SVG 中更改颜色 [重复]

...】：2015-02-0713:26:47【问题描述】：我创建了一个SVG地图，当我将鼠标悬停在链接上时，我想更改地图目标区域的颜色。当我将鼠标悬停在地图上的某个区域时，链接会从jQ获取下划线类，并且CSS悬停效果会更改地图上的填充颜色... 查看详情

按下鼠标时如何在 Chrome 中保持悬停状态？

...mouseispressed?【发布时间】：2012-07-0604:45:48【问题描述】：当我的用户按下自定义下拉列表时，我将停止mousedown事件。这是为了避免在用户有效拖动鼠标时浏览器的默认文本突出显示行为。我在处理函数中使用jQueryevent.preventDefault(... 查看详情