将鼠标悬停在圆圈上以增加尺寸和文字也会增加

Question

我目前正在从数据库中绘制一个svg圈，它是标签（文本）。我希望圆圈的笔划宽度在圆圈的悬停以及它的文本同时增加，这意味着如果圆圈在上面并且它的笔划宽度增加，则文本的大小也应该增加。我是否需要在css中创建一个子类，我是新的................................... ...........

<circle class="circles"cx=',row[1],' cy=',row[2],' r="0.2"></circle>
<text class="text" x=',row[1],'y=',row[2],' transform="translate(0',move,')scale(-1,1) rotate(180)">',row[0],'</text>')       

.text {
font-size: 0.8px;
font-family: Verdana;
fill: peachpuff;
}

.text:hover {
font-size: 2px;
}   

.circles{
        fill:       cyan;


}
.circles:hover{
        stroke:       cyan;
        stroke-width:   0.4; 
 }                    

Answer 1

这是一个演示：

• 根据要求将您的圈子和文本包装在单个SVG容器中或单独的类中。
• 使用circle的stroke-width属性和font-size作为文本，并在容器悬停时相应地更改它们的值。

.circleS:hover circle{
stroke-width:5;
}
.circleS:hover text{
font-size:18px;
}

<svg height="100" width="100" class="circleS">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  <text x="25" y="50" fill="white">Random</text>
</svg>