更改当前元素悬停事件的另一个元素样式

问题描述:

我试图显示悬停在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财产。这可能吗?

+0

div元素不能是圆形元素的子元素。这是你的主要问题。 change-me.visibility也是错误的。 attributeName是可见性。 –

+0

那就解释一下。任何其他方式来实现我所追求的?或者更好的是,有没有一种方法来设计'

'标签? – BradStell
+0

_使用foreignObject并将其父母正确使用。请您详细说明这意味着什么? – BradStell

如果你只是想利用默认提示,你可以简单地设置一个<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

我知道'

'属性,我在我的应用程序中有这个属性。但我希望它被风格化。我无法设计''标签来挽救我的生命(今天花了5个小时)。所以我试图推出我自己的风格的工具提示。 – BradStell

我已经解决了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>