我正在寻找一种方法,当鼠标悬停在元素上时,显示svg圆圈中的alt文本:结果
我正在使用这个javascrip代码,但我无法让它工作:
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;
});
}
有什么想法吗?
是对该小提琴示例的修改:https://jsfiddle.net/ywljkgah/1/ 我使用GetElementsByCassName而不是getelementsbytagname。我认为问题可能是在脚本的前面使用了mouseover addeventlistener。但我如何“结合”这两种用途呢?
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;
});
}
: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;
}
* /
<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>
1条答案
按热度按时间8cdiaqws1#
您只需将以下内容添加到已有的鼠标悬停事件侦听器中:
我删除了将侦听器放置在
#pageTitle
元素。这是不必要的,并且阻止了它的工作。