0
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プロパティを変更しようとしています。これは可能ですか？
div要素は、円要素の子にすることはできません。それがあなたの主な問題です。 change-me.visibilityも間違っています。 attributeNameは可視性です。 –
それでは、それについて説明します。後に何を達成するための他の方法？それとも、「
_ foreignObjectを使用し、それを正しく親にしてください。その意味を詳しく教えてください。 – BradStell