Css 用另一个类调用一个类不起作用_Css_Class_Hover

Css 用另一个类调用一个类不起作用

css class

Css 用另一个类调用一个类不起作用,css,class,hover,Css,Class,Hover,我正试图在另一个类上徘徊时调用一个类。在这种情况下，当鼠标悬停在数字上时，必须显示文本我在过去成功地做到了这一点，所以我似乎不明白为什么它不起作用 <html> <header> <style> body { font-family: 'roboto'; } .wrapper {

我正试图在另一个类上徘徊时调用一个类。在这种情况下，当鼠标悬停在数字上时，必须显示文本

我在过去成功地做到了这一点，所以我似乎不明白为什么它不起作用

<html>
    <header>
        <style>
            body {
                font-family: 'roboto';
            }           

            .wrapper {
                margin-top:200px;
                height:180px;
                margin-left:13%;
            }

            .wrapper div {
                float:left;
                width:90px;
                max-width:90px;
                margin:10px;
                transition: 0.2s all linear;
            }

            .wrapper img {
                width:90px;
                margin:10px;
                transition: 0.2s all linear;
            }

            .wrapper img:hover {
                width:100px;
            }

            .namen {
                margin-left:17%;
                font-size:18px;
            }
                .namen div {
                    float:left;
                    padding:0 56px 0 0;
                    display:none;
                }

                .wrapper div:hover ~ .namen div {
                    display:block;
                }


        </style>
        <link href='http://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
    </header>
    <body>
        <section class="wrapper">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </section>
        <section class="namen">
            <div>Aage</div>
            <div>Willem</div>
            <div>Marco</div>
            <div>Ronald</div>
            <div>Onno</div>
            <div>Timo</div>
            <div style="padding-left:8px;">Mark</div>
            <div style="padding-left:8px;">Youri</div>
        </section>
    </body>
</htmL>


身体{
字体系列：“roboto”；
}           
.包装纸{
利润上限：200px；
高度：180像素；
左边缘：13%；
}
.包装部{
浮动：左；
宽度：90px；
最大宽度：90px；
利润率：10px；
过渡：0.2s全线性；
}
.img{
宽度：90px；
利润率：10px；
过渡：0.2s全线性；
}
.img：悬停{
宽度：100px；
}
纳曼先生{
左边缘：17%；
字号：18px；
}
纳明分区{
浮动：左；
填充：0 56px 0 0；
显示：无；
}
.wrapper div:hover~.namen div{
显示：块；
}
1.
2.
3.
4.
5.
6.
7.
8.
阿格
威廉
马可
罗纳德
昂诺
蒂莫
做记号
尤里

使用CSS是不可能的，因为悬停的div和目标没有一个共同的父对象。我明白了，谢谢你的回答，有没有办法让它在CSS中工作？只有通过改变结构——坦率地说，这类事情最好由Javascript处理。特别是当你想要（我怀疑）下一步的目标是单个元素而不是所有的div时。非常感谢，我认为jscript确实是一种方法。