文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >SVG:悬停时在p标签中显示alt文本

问SVG:悬停时在p标签中显示alt文本
EN

Stack Overflow用户
提问于 2021-07-10 18:06:14
回答 1查看 145关注 0票数 0

我正在寻找一种方法来显示SVG循环中的alt文本，当鼠标在元素上时：结果

我正在处理这个javascrip代码，但我无法让它工作：

代码语言：javascript
复制
var PageTitle = document.getElementsByClassName("btn");
var MenuPageTitle = document.getElementById("pagetitle");
for (var i = 0; i < PageTitle.length; i++) {
PageTitle[i].addEventListener("mouseover", function() {
var alt = this.alt;
MenuPageTitle.textContent = alt;
});
}

有什么想法吗？

是对这个Fiddle示例的修改：https://jsfiddle.net/ywLjkgah/1/ I使用getElementsByClassName而不是getElementsByTagName。我认为问题可能在于前面的脚本中使用了mouseover addEventListener。但我如何将这两种用途结合起来呢？

​

代码语言：javascript
复制
var allCircles = document.querySelectorAll("circle");

// Add an click handler to every circle that
// adds the class "active" to the clicked circle.
allCircles.forEach(element => {
  element.addEventListener("click", clickHandler);
  element.addEventListener("mouseover", mouseoverHandler);
  element.addEventListener("mouseout", mouseoutHandler);
});

function clickHandler(evt) {
  // Clear current selection (remove class "active" from any circle)
  allCircles.forEach((circle) => circle.classList.remove("active"));
  // Mark clicked circle selected
  evt.target.classList.add("active");
  // Clear any currently highlighted lines
  clearHighlightedLines();
}


function mouseoverHandler(evt) {
  let activeCircle = document.querySelector("circle.active");
  let hoveredCircle = evt.target;
  if (activeCircle && (activeCircle != hoveredCircle)) {
    // Get the line that has classes matching both the actibve and hovered circle
    let line = document.querySelector("line." + activeCircle.id + "." + hoveredCircle.id);
    // Add the class "highlight" to that line
    if (line)
      line.classList.add("highlight");
  }
}

function mouseoutHandler(evt) {
  clearHighlightedLines();
}

function clearHighlightedLines() {
  // Find the line with class "highlight" (if any)
  var line = document.querySelector("line.highlight");
  // Remove the class "highlight"
  if (line)
    line.classList.remove("highlight");
}

var PageTitle = document.getElementsByClassName("btn");
var MenuPageTitle = document.getElementById("pagetitle");

for (var i = 0; i < PageTitle.length; i++) {
  PageTitle[i].addEventListener("mouseover", function() {
    var alt = this.alt;
    MenuPageTitle.textContent = alt;
  });
}
代码语言：javascript
复制
:root {
  --color-1: #F2B705;
  --color-2: #C30F0E;
  --color-3: #264ABA;
  --color-4: #009CD2;
  --color-5: #E25727;
  --color-11: #C29204;
  --color-22: #990B0B;
  --color-33: #172E73;
  --color-44: #006B8E;
  --color-55: #BA4620;
}

#c1 {
  fill: var(--color-1);
}

#c2 {
  fill: var(--color-2);
}

#c3 {
  fill: var(--color-3);
}

#c4 {
  fill: var(--color-4);
}

#c5 {
  fill: var(--color-5);
}

.cls-7 {
  fill: none;
}

#c1.active {
  stroke: var(--color-11);
  stroke-width: 21.5;
}

#c2.active {
  stroke: var(--color-22);
  stroke-width: 21.5;
}

#c3.active {
  stroke: var(--color-33);
  stroke-width: 21.5;
}

#c4.active {
  stroke: var(--color-44);
  stroke-width: 21.5;
}

#c5.active {
  stroke: var(--color-55);
  stroke-width: 21.5;
}

#c1.circle:hover:not(.active) {
  stroke: var(--color-11);
  stroke-width: 21.5;
}

#c2.circle:hover:not(.active) {
  stroke: var(--color-22);
  stroke-width: 21.5;
}

#c3.circle:hover:not(.active) {
  stroke: var(--color-33);
  stroke-width: 21.5;
}

#c4.circle:hover:not(.active) {
  stroke: var(--color-44);
  stroke-width: 21.5;
}

#c5.circle:hover:not(.active) {
  stroke: var(--color-55);
  stroke-width: 21.5;
}

circle.btn1:hover:not(.active) {
  stroke: var(--color-11);
  stroke-width: 21.5;
}

circle.btn2:hover:not(.active) {
  stroke: var(--color-22);
  stroke-width: 21.5;
}

circle.btn3:hover:not(.active) {
  stroke: var(--color-33);
  stroke-width: 21.5;
}

circle.btn4:hover:not(.active) {
  stroke: var(--color-44);
  stroke-width: 21.5;
}

circle.btn5:hover:not(.active) {
  stroke: var(--color-55);
  stroke-width: 21.5;
}

line {
  stroke: #c1c1c1;
  stroke-width: 22;
}

line.highlight {
  stroke: black;
}


/*
circle.active {
    stroke: red;
    stroke-width: 11.5;
}
*/
代码语言：javascript
复制
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-10 -10 940 910">
   <defs>
    <style></style>
  </defs>
       <polygon id="fem-kant" class="cls-7" points="456.29 7.49 898.87 329.05 729.82 849.33 182.76 849.33 13.71 329.05 456.29 7.49"/>
      <line class="c3 c5" x1="656.32" y1="748.57" x2="133.5" y2="368.62"/>
      <line class="c2 c4" x1="258.55" y1="747.22" x2="779.33" y2="368.43"/>
      <line class="c1 c4" x1="258.55" y1="747.22" x2="457.43" y2="133.5"/>
      <line class="c1 c3" x1="457.43" y1="133.5" x2="657.03" y2="748.57"/>
      <line class="c5 c2" x1="133.5" y1="368.62" x2="779.33" y2="368.43"/>
      <line class="c1 c2" x1="779.33" y1="368.43" x2="457.43" y2="133.5"/>
      <line class="c2 c3" x1="779.33" y1="368.43" x2="657.03" y2="748.57"/>
      <line class="c3 c4" x1="258.55" y1="747.22" x2="657.03" y2="748.57"/>
      <line class="c4 c5" x1="258.55" y1="747.22" x2="133.5" y2="368.62"/>
      <line class="c5 c1" x1="133.5" y1="368.62" x2="457.43" y2="133.5"/>
  <a href="#0">
      <circle id="c1" class="btn1 btn" alt="one" cx="455.9" cy="133.5" r="133" data-Name="shape 1" data-tabindex="0" />
        </a>
  <a href="#0">
      <circle id="c2" class="btn2 btn" alt="two" cx="779.33" cy="368.43" r="133" data-Name="shape 2" data-tabindex="0" />
            </a>
            <a href="#0">
                <circle id="c3" class="btn3 btn" alt="three" cx="656.32" cy="748.57" r="133" data-Name="shape 3" data-tabindex="0" />
            </a>
  <a href="#0">
      <circle id="c4" class="btn4 btn" alt="four" cx="256.18" cy="748.57" r="133" data-Name="shape 4" data-tabindex="0" />
            </a>
            <a href="#0">
                <circle id="c5" class="btn5 btn" alt="Application" cx="133.5" cy="368.62" r="133" data-Name="shape 5" data-tabindex="0" />
            </a>
<script></script>
    </svg>
<p id="pagetitle"> </p>

​

javascript
svg
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-07-10 18:22:44

您只需要添加到您已经拥有的mouseover事件侦听器：

代码语言：javascript
复制
 document.querySelector("#pagetitle").innerHTML = evt.target.getAttribute('alt')

我删除了将侦听器放置在#pageTitle元素上的代码。这不是墓地，而且阻止了这件事的发生。

​

代码语言：javascript
复制
let allCircles = document.querySelectorAll("circle");
// Add an click handler to every circle that
// adds the class "active" to the clicked circle.
allCircles.forEach(element => {
  element.addEventListener("click", clickHandler);
  element.addEventListener("mouseover", mouseoverHandler);
  element.addEventListener("mouseout", mouseoutHandler);
});

function clickHandler(evt) {
  // Clear current selection (remove class "active" from any circle)
  allCircles.forEach((circle) => circle.classList.remove("active"));
  // Mark clicked circle selected
  evt.target.classList.add("active");
  // Clear any currently highlighted lines
  clearHighlightedLines();
}


function mouseoverHandler(evt) {
  let activeCircle = document.querySelector("circle.active");
    document.querySelector("#pagetitle").innerHTML = evt.target.getAttribute('alt')

  let hoveredCircle = evt.target;
  if (activeCircle && (activeCircle != hoveredCircle)) {
    // Get the line that has classes matching both the actibve and hovered circle
    let line = document.querySelector("line." + activeCircle.id + "." + hoveredCircle.id);
    // Add the class "highlight" to that line
    if (line)
      line.classList.add("highlight");
  }
}

function mouseoutHandler(evt) {
  clearHighlightedLines();
}

function clearHighlightedLines() {
  // Find the line with class "highlight" (if any)
  var line = document.querySelector("line.highlight");
  // Remove the class "highlight"
  if (line)
    line.classList.remove("highlight");
}
代码语言：javascript
复制
:root {
  --color-1: #F2B705;
  --color-2: #C30F0E;
  --color-3: #264ABA;
  --color-4: #009CD2;
  --color-5: #E25727;
  --color-11: #C29204;
  --color-22: #990B0B;
  --color-33: #172E73;
  --color-44: #006B8E;
  --color-55: #BA4620;
}

#c1 {
  fill: var(--color-1);
}

#c2 {
  fill: var(--color-2);
}

#c3 {
  fill: var(--color-3);
}

#c4 {
  fill: var(--color-4);
}

#c5 {
  fill: var(--color-5);
}

.cls-7 {
  fill: none;
}

#c1.active {
  stroke: var(--color-11);
  stroke-width: 21.5;
}

#c2.active {
  stroke: var(--color-22);
  stroke-width: 21.5;
}

#c3.active {
  stroke: var(--color-33);
  stroke-width: 21.5;
}

#c4.active {
  stroke: var(--color-44);
  stroke-width: 21.5;
}

#c5.active {
  stroke: var(--color-55);
  stroke-width: 21.5;
}

#c1.circle:hover:not(.active) {
  stroke: var(--color-11);
  stroke-width: 21.5;
}

#c2.circle:hover:not(.active) {
  stroke: var(--color-22);
  stroke-width: 21.5;
}

#c3.circle:hover:not(.active) {
  stroke: var(--color-33);
  stroke-width: 21.5;
}

#c4.circle:hover:not(.active) {
  stroke: var(--color-44);
  stroke-width: 21.5;
}

#c5.circle:hover:not(.active) {
  stroke: var(--color-55);
  stroke-width: 21.5;
}

circle.btn1:hover:not(.active) {
  stroke: var(--color-11);
  stroke-width: 21.5;
}

circle.btn2:hover:not(.active) {
  stroke: var(--color-22);
  stroke-width: 21.5;
}

circle.btn3:hover:not(.active) {
  stroke: var(--color-33);
  stroke-width: 21.5;
}

circle.btn4:hover:not(.active) {
  stroke: var(--color-44);
  stroke-width: 21.5;
}

circle.btn5:hover:not(.active) {
  stroke: var(--color-55);
  stroke-width: 21.5;
}

line {
  stroke: #c1c1c1;
  stroke-width: 22;
}

line.highlight {
  stroke: black;
}


/*
circle.active {
    stroke: red;
    stroke-width: 11.5;
}
*/
代码语言：javascript
复制
<p id="pagetitle">Placeholder</p>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-10 -10 940 910">
   <defs>
    <style></style>
  </defs>
       <polygon id="fem-kant" class="cls-7" points="456.29 7.49 898.87 329.05 729.82 849.33 182.76 849.33 13.71 329.05 456.29 7.49"/>
      <line class="c3 c5" x1="656.32" y1="748.57" x2="133.5" y2="368.62"/>
      <line class="c2 c4" x1="258.55" y1="747.22" x2="779.33" y2="368.43"/>
      <line class="c1 c4" x1="258.55" y1="747.22" x2="457.43" y2="133.5"/>
      <line class="c1 c3" x1="457.43" y1="133.5" x2="657.03" y2="748.57"/>
      <line class="c5 c2" x1="133.5" y1="368.62" x2="779.33" y2="368.43"/>
      <line class="c1 c2" x1="779.33" y1="368.43" x2="457.43" y2="133.5"/>
      <line class="c2 c3" x1="779.33" y1="368.43" x2="657.03" y2="748.57"/>
      <line class="c3 c4" x1="258.55" y1="747.22" x2="657.03" y2="748.57"/>
      <line class="c4 c5" x1="258.55" y1="747.22" x2="133.5" y2="368.62"/>
      <line class="c5 c1" x1="133.5" y1="368.62" x2="457.43" y2="133.5"/>
  <a href="#0">
      <circle id="c1" class="btn1 btn" alt="one" cx="455.9" cy="133.5" r="133" data-Name="shape 1" data-tabindex="0" />
        </a>
  <a href="#0">
      <circle id="c2" class="btn2 btn" alt="two" cx="779.33" cy="368.43" r="133" data-Name="shape 2" data-tabindex="0" />
            </a>
            <a href="#0">
                <circle id="c3" class="btn3 btn" alt="three" cx="656.32" cy="748.57" r="133" data-Name="shape 3" data-tabindex="0" />
            </a>
  <a href="#0">
      <circle id="c4" class="btn4 btn" alt="four" cx="256.18" cy="748.57" r="133" data-Name="shape 4" data-tabindex="0" />
            </a>
            <a href="#0">
                <circle id="c5" class="btn5 btn" alt="Application" cx="133.5" cy="368.62" r="133" data-Name="shape 5" data-tabindex="0" />
            </a>
<script></script>
    </svg>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/68330400

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档