我正在尝试为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;
}
}
答案 0 :(得分:0)
我正在尝试为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>
答案 1 :(得分:0)
在您的代码中,您想覆盖内联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>