Question

我正在尝试为clicked元素设置CSS样式。我试图将:active :clicked :targed放在类名中，但没有一个起作用。 :hover效果很好。感谢您的回答。

HTML：

<a (click)="Clicked(14)" class="lankstumas">
    <ellipse
    class="e-image"
       id="path3769-9"
       cx="43.089287"
       cy="103.09822"
       rx="43.845238"
       ry="39.498512"
       style="fill:#ff7f2a;stroke-width:0.26458332" />
    <text
    class="e-text"
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
       x="22.300594"
       y="99.318459"
       id="text3836"><tspan
         sodipodi:role="line"
         id="tspan3834"
         x="22.300594"
         y="99.318459"
         style="stroke-width:0.26458332">LANKS - </tspan><tspan
         sodipodi:role="line"
         x="22.300594"
         y="112.54762"
         style="stroke-width:0.26458332"
         id="tspan3838">TUMAS</tspan></text>
         </a>

CSS：

.lankstumas:hover{
        .e-image{
            transition: .2s fill;
            fill: #FF8504!important; 
        }
        .e.text{
            transition: .2s fill;
            fill:#fff!important;
        }
        }

Answer 1

我正在尝试为clicked元素设置CSS样式。

一种实现此效果的方法是为元素提供HTML5 Custom data-*属性，如下所示：

data-clicked="false"

然后您可以使用javascript检测元素上的点击并更新属性。

要使用javascript检测点击，请使用：

myElement.addEventListener('click', myFunction, false);

要修改属性，请使用：

myElement.dataset.myAttribute = myValue;

工作示例：

const boxes = document.getElementsByClassName('box');

const showClick = (e) => {
  event.target.dataset.clicked = 'true';
}

for (let i = 0; i < boxes.length; i++) {

  boxes[i].addEventListener('click', showClick, false);


}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 6px;
  background-color: rgb(255, 0, 0);
  cursor: pointer;
}

.box::after {
  content: 'Click me!';
  display: block;
  text-align: center;
  line-height: 100px;
  color: rgb(255, 255, 255);
  font-weight: bold;
}

.box[data-clicked="true"] {
  color: rgb(255, 0, 0);
  background-color: rgb(255, 255, 0);
}

.box[data-clicked="true"]::after {
  content: 'Clicked!';
  color: rgb(255, 0, 0);
}

<div class="box" data-clicked="false"></div>
<div class="box" data-clicked="false"></div>
<div class="box" data-clicked="false"></div>
<div class="box" data-clicked="false"></div>
<div class="box" data-clicked="false"></div>

Answer 2

在您的代码中，您想覆盖内联CSS。为了更改颜色，您需要删除fill的内联样式。接下来是一个示例：

svg{border:solid;width:90vh;}
.e-image{transition: .2s fill;}

.lankstumas:hover .e-image{fill: skyBlue; }
.lankstumas:hover .e-text{fill:#fff;}

<svg viewBox="-5 60 100 90">

<a class="lankstumas">
    <ellipse
    class="e-image"
       id="path3769-9"
       cx="43.089287"
       cy="103.09822"
       rx="43.845238"
       ry="39.498512"
       fill="#ff7f2a"
       
        />
    <text
    class="e-text"
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;stroke:none;stroke-width:0.26458332"
       x="22.300594"
       y="99.318459"
       id="text3836">
      <tspan
         sodipodi:role="line"
         id="tspan3834"
         x="22.300594"
         y="99.318459"
         style="stroke-width:0.26458332">LANKS - </tspan><tspan
         sodipodi:role="line"
         x="22.300594"
         y="112.54762"
         style="stroke-width:0.26458332"
         id="tspan3838">TUMAS</tspan></text>
         </a>
</svg>

单击SVG元素时应用CSS样式

2 个答案: