Question

所以我试图这样做，如果你将鼠标悬停在wrapperleft上，cardinfop1的背景颜色会发生变化，但它对我不起作用。我做错了什么？

下面的代码和小提琴：

<div id="cardinfop1">
    <div class="cardtitle">Fire Ship</div>
    <img class="cardimage" src="assets/fireshipcard.svg" />
    <div class="carddescription">This card costs 3 gunpowder to use and will deal 5 damage to your opponent.</div>
</div>  


<div id="player1card1wrapper" class="wrapper wrapperleft"><img id="player1card1" class="card player1card"/></div>
<div id="player1card2wrapper" class="wrapper wrapperleft"><img id="player1card2" class="card player1card"/></div>
<div id="player1card3wrapper" class="wrapper wrapperleft"><img id="player1card3" class="card player1card"/></div>
<div id="player1card4wrapper" class="wrapper wrapperleft"><img id="player1card4" class="card player1card"/></div>
<div id="player1card5wrapper" class="wrapper wrapperleft"><img id="player1card5" class="card player1card"/></div>
<div id="player1card6wrapper" class="wrapper wrapperleft"><img id="player1card6" class="card player1card"/></div>
<div id="player1card7wrapper" class="wrapper wrapperleft"><img id="player1card7" class="card player1card"/></div>
<div id="player1card8wrapper" class="wrapper wrapperleft"><img id="player1card8" class="card player1card"/></div>


<style>
.wrapper {
    width: 90px;
    height: 123.75px;
    margin-top: 15px;
    background-color: pink;
}

.wrapperleft {
    float: left;
    margin-left: 18px;
 }

#cardinfop1 {
    width: 350px;
    height: 250px;
    background-color: white;
    margin-left: 126.62px;
}

#wrapperleft:hover ~ #cardinfop1 {
    background-color: green;
}
</style>

这是fiddle

Answer 1

这里有两个问题：

您必须使用班级选择器：.wrapperleft
您正在使用~运算符错误

一般兄弟组合子由“波浪号”组成（U + 007E，〜）分隔两个简单选择器序列的字符。该由两个序列表示的元素共享同一个父元素文档树和第一个序列表示的元素先于（不一定是立即）由...表示的元素第二个。

我更改了#cardinfop1和.wrapper元素的顺序，它运行正常。试试updated fiddle

Answer 2

你非常接近。 ~适用于一般的后继者兄弟，这意味着它会针对兄弟姐妹。此外，您引用了#wrapperleft，但您没有任何元素作为ID属性。它应该是：.wrapperleft

解决方案：将cardinfop1放在启动悬停的元素之后：

            <div id="player1card2wrapper" class="wrapper wrapperleft"><img id="player1card2" class="card player1card"/></div>
            <div id="player1card3wrapper" class="wrapper wrapperleft"><img id="player1card3" class="card player1card"/></div>
            <div id="player1card4wrapper" class="wrapper wrapperleft"><img id="player1card4" class="card player1card"/></div>
            <div id="player1card5wrapper" class="wrapper wrapperleft"><img id="player1card5" class="card player1card"/></div>
            <div id="player1card6wrapper" class="wrapper wrapperleft"><img id="player1card6" class="card player1card"/></div>
            <div id="player1card7wrapper" class="wrapper wrapperleft"><img id="player1card7" class="card player1card"/></div>
            <div id="player1card8wrapper" class="wrapper wrapperleft"><img id="player1card8" class="card player1card"/></div>
    <div id="cardinfop1">
            <div class="cardtitle">Fire Ship</div>
            <img class="cardimage" src="assets/fireshipcard.svg" />
            <div class="carddescription">This card costs 3 gunpowder to use and will deal 5 damage to your opponent.</div>
            </div>

然后按如下方式修复CSS：

.wrapperleft:hover ~#cardinfop1 {
 background-color: green;
}

这是一个小提琴：http://jsfiddle.net/sjrmfv56/1/

您需要稍微修复一下CSS定位。

Answer 3

当wrapperLeft是一个类时，你添加了#wrapperLeft：hover。您使用了〜＃cardinfop1，其中cardinfop1位于任何wrapperLeft类之前。

现在，根据您的要求，没有办法根据下一个元素选择CSS中的前一个元素。

但有一种方法可以做到。

<div class="parent">

    <div id="cardinfop1">
        <div class="cardtitle">Fire Ship</div>
        <img class="cardimage" src="assets/fireshipcard.svg" />
        <div class="carddescription">This card costs 3 gunpowder to use and will deal 5 damage to your opponent.</div>
    </div>  


        <div id="player1card1wrapper" class="wrapper wrapperleft">
           <img id="player1card1" class="card player1card"/>
        </div>
        <div id="player1card2wrapper" class="wrapper wrapperleft">
            <img id="player1card2" class="card player1card"/>
        </div>
        <div id="player1card3wrapper" class="wrapper wrapperleft">
            <img id="player1card3" class="card player1card"/>
        </div>
        <div id="player1card4wrapper" class="wrapper wrapperleft">
            <img id="player1card4" class="card player1card"/>
        </div>
        <div id="player1card5wrapper" class="wrapper wrapperleft">
            <img id="player1card5" class="card player1card"/>
        </div>
        <div id="player1card6wrapper" class="wrapper wrapperleft">
            <img id="player1card6" class="card player1card"/>
        </div>
        <div id="player1card7wrapper" class="wrapper wrapperleft">
            <img id="player1card7" class="card player1card"/>
        </div>
        <div id="player1card8wrapper" class="wrapper wrapperleft">
            <img id="player1card8" class="card player1card"/>
        </div>
    </div>
<style>
.parent{
    height:0px
}
.parent #cardinfop1 {
    background-color: white;
}
.parent:hover #cardinfop1 {
    background-color: green;
}
#cardinfop1:hover {
    background-color: white !important;
}
.parent > .wrapperleft:hover{
    background-color: pink;
}

.wrapper {
    width: 90px;
    height: 123.75px;
    margin-top: 15px;
    background-color: pink;
}
.wrapperleft {
    float: left;
    margin-left: 18px;
}

#cardinfop1 {
    width: 350px;
    height: 250px;
    background-color: white;
    margin-left: 126.62px;
}
</style>

将鼠标悬停在类上影响另一个元素

3 个答案: