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容器或单独的类中。
使用圈子的stroke-width属性和font-size作为文本，并在容器悬停时相应地更改其值。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: