更改当前元素悬停事件的另一个元素样式
问题描述：
我试图显示悬停在svg元素上的工具提示。为此，我在创建元素时尝试使用<set />标记。更改当前元素悬停事件的另一个元素样式
我知道可以在另一个元素的事件上改变当前元素的属性。反过来是可能的吗？更改当前元素的鼠标事件的另一个元素的属性？
body {
background-color: #EEE;
}
.container {
display: flex;
flex-flow: row wrap;
}
.card {
width: 20em;
height: 20em;
padding: 2em;
background-color: white;
margin: 2em;
box-shadow: 0 0 5px #222;
}
.pie-center {
background: none;
border-radius: 50%;
transform: rotate(-90deg);
}
.circle1 {
fill: none;
stroke: teal;
stroke-width: 7;
stroke-dasharray: 30 70;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
}<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="conic-gradient.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="card">
<svg class="pie-center" viewBox="0 0 40 40">
<circle class="circle1" r="15.915494309" cx="20" cy="20">
<set attributeName="change-me.visibility" from="hidden" to="visible" begin="mouseover" end="mouseout" />
<div class="tooltip">
<span id="change-me" class="tooltiptext">Tooltip text</span>
</div>
</circle>
</svg>
</div>
</div>
</body>
</html>正如你可以看到，我想，当mouseover事件的发生一圈改变我的工具提示visibility财产。这可能吗？
答
如果你只是想利用默认提示，你可以简单地设置一个<title>元素作为圆的孩子。默认情况下，只会出现在悬停：
body {
background-color: #EEE;
}
.container {
display: flex;
flex-flow: row wrap;
}
.card {
width: 20em;
height: 20em;
padding: 2em;
background-color: white;
margin: 2em;
box-shadow: 0 0 5px #222;
}
.pie-center {
background: none;
border-radius: 50%;
transform: rotate(-90deg);
}
.circle1 {
fill: none;
stroke: teal;
stroke-width: 7;
stroke-dasharray: 30 70;
}<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="conic-gradient.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="card">
<svg class="pie-center" viewBox="0 0 40 40">
<circle class="circle1" r="15.915494309" cx="20" cy="20">
<title class="tooltip">Tooltip</title>
</circle>
</svg>
</div>
</div>
</body>
</html>+0
答
我已经解决了SMIL和使其显示。请注意，您只能将SMIL应用于SVG元素，这就是为什么我将foreignObject元素而不是html元素作为目标的原因。
出于某种原因，您已经旋转了整个SVG，因此工具提示中的文本也被旋转了。我会离开你去处理。
body {
background-color: #EEE;
}
.container {
display: flex;
flex-flow: row wrap;
}
.card {
width: 20em;
height: 20em;
padding: 2em;
background-color: white;
margin: 2em;
box-shadow: 0 0 5px #222;
}
.pie-center {
background: none;
border-radius: 50%;
transform: rotate(-90deg);
}
.circle1 {
fill: none;
stroke: teal;
stroke-width: 7;
stroke-dasharray: 30 70;
}
.tooltiptext {
font-size: 5px;
background-color: black;
color: #fff;
text-align: center;
padding: 2px 0;
border-radius: 6px;
}<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="conic-gradient.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="card">
<svg class="pie-center" viewBox="0 0 40 40">
<circle id="c" class="circle1" r="15.915494309" cx="20" cy="20">
</circle>
<set href="#fo" attributeName="visibility" to="visible" begin="c.mouseover" end="c.mouseout" />
<foreignObject id="fo" visibility="hidden" x="15" width="100" height="100" pointer-events="none">
<div class="tooltip">
<span id="change-me" class="tooltiptext">Tooltip text</span>
</div>
</foreignObject>
</svg>
</div>
</div>
</body>
</html>
div元素不能是圆形元素的子元素。这是你的主要问题。 change-me.visibility也是错误的。 attributeName是可见性。 –
那就解释一下。任何其他方式来实现我所追求的？或者更好的是，有没有一种方法来设计'
_使用foreignObject并将其父母正确使用。请您详细说明这意味着什么？ – BradStell