gpt4 book ai didi

javascript - 添加带有样式组件的事件类不起作用

转载 作者:行者123 更新时间:2023-12-05 00:30:17 26 4
gpt4 key购买 nike

所以我的功能是:

function onClickChange(props) {
let MyDiv = document.getElementById('myDIV')
let InterfaceDesign = document.getElementById('interfaceDesign')
if (MyDiv.style.display === 'none') {
MyDiv.style.display = ''
InterfaceDesign.classList.add('active')
} else {
MyDiv.style.display = 'none'
InterfaceDesign.classList.remove('active')
}
}

从 DOM 中的这个函数我可以看到它正在获取事件类。但是从我的样式组件中:
const FirstDivElement = styled.div`
position: relative;
overflow: hidden;
width: 100%;
background-color: #000;
&:hover {
background-color: #e6007e;
transform: scale(1.05);
}
&:active{
background-color: #e6007e;
}
`

它没有得到 &:active 的风格

我的 div 元素是:
<div id="interfaceDesign">
<div onClick={onClickChange}>
<ListItems
headingText="Interface Design"
backgroundImage={props.secondBackgroundImage}
>
<Img
style={{
height: '50px',
width: '50px',
}}
sizes={props.interfacedesign}
/>
</ListItems>
</div>
</div>
<div id="myDIV" style={{ display: 'none' }}>
<InterfaceDesign
secondBackgroundImage={props.secondBackgroundImage}
interfacedesignMagenta={props.interfacedesignMagenta}
/>
</div>
</div>

有人可以帮忙吗?提前谢谢你:D

最佳答案

您正在为 :active pseudo-class 提供样式,仅在元素被激活时使用(例如,在鼠标单击期间)。您可能想从 &:active 更改至&.active在您的样式化组件 CSS 中。

此外,您应该注意,您通常会根据带有样式组件的 Prop 更改样式。你可以做你正在做的事,但它不太常见。

关于javascript - 添加带有样式组件的事件类不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52951709/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com