Question

我在mouseover期间尝试在mouseover和classList.remove期间应用classList.add。应添加或删除的类是“.portraitBG”。它有一个＃32353F的背景。

当我告诉代码将此函数应用于我的所有html类“.portrait.flex”时，我不知道为什么这不起作用。我现在不想使用jQuery。

查看https://codepen.io/gabrielacaesar/pen/Pmrpzm

上的完整代码

我的Javascript：

var portrait = document.querySelectorAll(".portrait.flex")

  portrait.addEventListener("mouseover", function() {
    portrait.classList.add("portraitBG");
  });

  portrait.addEventListener("mouseout", function() {
    portrait.classList.remove("portraitBG");
  });

我的HTML：

<section class="container">
        <div class="portraits flex">
            <a class="portrait flex one" href="#" alt="Foto:">
                <img src="http://cbn.globoradio.globo.com/estaticos/fotos/uploads2015/categorias/moreno-no-radio/11239_header.png">
                <div class="portraitContent">
                    <p class="portraitName">
                        Eliseu Padilha
                    </p>
                    <p class="portraitGovernment">
                        governo Michel Temer
                    </p>
                </div>
            </a>

            <a class="portrait flex two" href="#">
                <img src="http://cbn.globoradio.globo.com/estaticos/fotos/uploads2015/categorias/moreno-no-radio/11239_header.png">
                <div class="portraitContent">
                    <p class="portraitName">
                        Eva Chiavon
                    </p>
                    <p class="portraitGovernment">
                        governo Dilma Rousseff
                    </p>
                </div>
            </a>

            <a class="portrait flex three" href="#">
                <img src="http://cbn.globoradio.globo.com/estaticos/fotos/uploads2015/categorias/moreno-no-radio/11239_header.png">
                <div class="portraitContent">
                    <p class="portraitName">
                        Jaques Wagner
                    </p>
                    <p class="portraitGovernment">
                        governo Dilma Rousseff
                    </p>
                </div>
            </a>
     </section>

我的CSS：

            a {
                text-decoration: none;
                cursor: pointer;
            }

            .container {
                padding: 0;
                max-width: 1500px;
                margin: 0 auto;
            }


            .flex {
                display: flex;
            }

            .portraits {
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-between;
                padding: 30px 80px;
            }

            .portrait {
                max-width: 800px;
                max-height: 340px;
                flex-direction: column;
                text-align: center;
                padding-top: 30px;
            }

            .portraitBG {
                background: #32353F;
                border-radius: 5%;
            }

            .portrait img {
                max-width: 800px;
                max-height: 200px;
            }

            .portraitContent {
                border: 3px #32353F solid;
                border-radius: 5%;
                background: #00EC85;
            }

            .portraitName {
                font-size: 200%;
                color: white;
                padding-top: 7px;
            }

            .portraitGovernment {
                font-size: 100%;
                color: #32353F;
                padding-bottom: 7px;
            }

Answer 1

最好在CSS中执行

.portrait:hover{
  background: #32353F;
    border-radius: 5%;
}

为什么mouseover和moveout不适用于所有具有相同名称的类？

1 个答案: