Question

我的网页上有一个容器类型的东西。它包含标题和列表。当用户将鼠标悬停在容器上时，我希望标题加下划线。我尝试使用CSS，但只有当我将鼠标悬停在标题而不是容器上时才会显示下划线。

我对jQuery很新，但我还是尝试使用它，但它没有用。

以下是我的网页的一部分：

<div class="stuff">

<div class="subContainer">

            <div class="subHeading">

                Fruits

            </div>

            <div class="list">

                <ul>
                <li>Apple</li>
                <li>Mango</li>
                <li>Orange</li>
                <li>Banana</li>
                </ul>

            </div>

</div>

</div>

以下是相应的CSS：

.stuff .subContainer{
    border: 2px #E65010 solid;
    border-radius: 10px;
    display: inline-block;
    align-content: center;
    margin: 0 0.5em 0;
    padding: 0 2.5em;
    width: 23.5%;
    transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
}

.stuff .subContainer:hover{
    border: 2px #E65010 solid;
    border-radius: 0;
    background: rgba(230,80,16,0.2);
}

.stuff .subHeading{
    font-size: 2em;
    color: #000;
    font-weight: 500;
    text-align: center;
    margin: 0.8em 0 1.8em 0;
}

.stuff .subHeadingHover{
    text-decoration: underline;
    text-decoration-color: #E65010;
    text-decoration-style: dotted;
}

.stuff .list{
    font-family: oswald;
    font-weight: 300;
    letter-spacing: 3px;
    line-height: 2em;
    font-size: 1.5em;
    color: #000;
    text-align: justify;
    margin: 0 0 1.5em 0;
}

这是jQuery：

$(document).ready(function(){

    $(".stuff .subContainer").mouseover(function(){
        $(this).children(".subHeading").addClass(".subHeadingHover");
    });

    $(".stuff .subContainer").mouseout(function(){
    $(this).children(".subHeading").removeClass(".subHeadingHover");
    });

});

你能指出我做错了吗？

由于

Answer 1

更新您的JavaScript：

您需要从.和addClass("subHeadingHover")

中删除removeClass("subHeadingHover")

$(document).ready(function(){
    $(".stuff .subContainer").mouseover(function(){
        $(this).children(".subHeading").addClass("subHeadingHover");
    });
    $(".stuff .subContainer").mouseout(function(){
    $(this).children(".subHeading").removeClass("subHeadingHover");
    });
});

Answer 2

您可以通过添加.subContainer:hover

来使用此CSS

.stuff .subContainer:hover .subHeading{
    text-decoration: underline;
    text-decoration-color: #E65010;
    text-decoration-style: dotted;
}

请参阅下面的更新示例。

演示：JSFiddle

Answer 3

要在CSS中执行此操作，只需将.stuff .subContainer:hover .subHeading css添加到.stuff .subContainer{ border: 2px #E65010 solid; border-radius: 10px; display: inline-block; align-content: center; margin: 0 0.5em 0; padding: 0 2.5em; width: 23.5%; transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); } .stuff .subContainer:hover{ border: 2px #E65010 solid; border-radius: 0; background: rgba(230,80,16,0.2); } .stuff .subHeading{ font-size: 2em; color: #000; font-weight: 500; text-align: center; margin: 0.8em 0 1.8em 0; } .stuff .subContainer:hover .subHeading { text-decoration: underline; text-decoration-color: #E65010; text-decoration-style: dotted; } .stuff .list{ font-family: oswald; font-weight: 300; letter-spacing: 3px; line-height: 2em; font-size: 1.5em; color: #000; text-align: justify; margin: 0 0 1.5em 0; }

即可

<div class="stuff">

<div class="subContainer">

            <div class="subHeading">

                Fruits

            </div>

            <div class="list">

                <ul>
                <li>Apple</li>
                <li>Mango</li>
                <li>Orange</li>
                <li>Banana</li>
                </ul>

            </div>

</div>

</div>

[root@www ~]# cat test.txt 
John
Julia

Answer 4

您可以使用CSS

为其加下划线

.stuff .subContainer:hover{
    border: 2px #E65010 solid;
    border-radius: 0;
    background: rgba(230,80,16,0.2);
}

.stuff .subContainer:hover .subHeading{
    text-decoration: underline;
    text-decoration-color: #E65010;
    text-decoration-style: dotted;
}

基本上，您需要在容器上添加:hover而不是标题。

jQuery在悬停时添加类

4 个答案: