悬停在圆圈上以增加大小，文本也会增加答案

【问题标题】：Hover on circle to increase size and text increases as well悬停在圆圈上以增加大小，文本也会增加
【发布时间】：2017-12-25 01:59:53
【问题描述】：

我目前正在从数据库中绘制一个 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; 
 }

【问题讨论】：

你想放大圆圈吗？
不，我只需要增加文本的大小，在圆圈上悬停
@lloyd 如果它解决了您的问题，请确保接受答案。

标签： html css svg

【解决方案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>

【讨论】：