CSS 具有按钮触发器的元素的多个状态

Question

我正在创建一个网站，并试图在单击按钮时使网站放大背景图像的不同元素。我能够使用 :hover 将它放大到一个奇异点，尽管无法找到一种方法让 HTML 按钮触发多个自定义状态，如 :hover、:active & :focus in style.css

这是我的代码：

<a href="#" onclick="style.site='state1';">1</a>
<a href="#" onclick="style.site='state2';">2</a>
<a href="#" onclick="style.site='state3';">3</a>

            .site {
                background-image: url(images/Background.jpg);
                background-size: 100%;
                max-width: auto;
                position: relative;
                transition-property:all;
                transition-duration:5s;
            }
            .site:State1{
                transform-origin: 80%  50%;
                transform: scale(10);
                animation-timing-function: ease-in;
            }
            .site:State2{
                transform-origin: 20%  50%;
                transform: scale(10);
                animation-timing-function: ease-in;
            }
            .site:State3{
                transform-origin: 50%  60%;
                transform: scale(10);
                animation-timing-function: ease-in;
            }

这样可以吗？或者有类似的东西？

Answer 1

你可以用一个简单的函数来完成：

HTML:

<a href="#" onclick="switchState();">Text</a>

Javascript:

function switchState() {
    var elements = document.getElementsByClassName("site");
    for (var i = 0; i < elements.length; i++) {
        elements[i].style.transform = "scale(10)";
        elements[i].style.transformOrigin = "50% 60%";     
        elements[i].style.animationTimingFunction = "ease-in";   
}

或者，如果您使用的是 jQuery：

function switchState() {
        $(".site").css({
            "transform-origin": "50% 60%",
            "transform": "scale(10)",
            "animation-timing-function": "ease-in",
        });       
    }

如果将 css 属性作为参数传递，则不需要对它们进行硬编码。

CSS 具有按钮触发器的元素的多个状态

CSS multiple states for elements with button triggers

html

css

wordpress