Question

我有一个容器，背景图像是标题和按钮。

我想将鼠标悬停在容器上并将标题文本对齐更改为左侧，与按钮相同并显示一些信息。

我的问题是，如果仅使用CSS3可以实现这一点吗？

以下是我想要做的图片： enter image description here （这个名字并不重要，只是一个例子）

这是我的HTML：

   <article class="destination__item destination__item--jacksonhole">
       <h2 class="destination__item--name">Jackson Hole</h2>
       <a href="#" class="destination__item--btn">Ver más</a>
   </article>

我的CSS：

.destination__item {
    padding: 16em 0;
    text-align: center;
}
    .destination__item--canyons {
        background: url(../images/destinos/dest1.jpg) no-repeat;
        background-size: cover;
    }
    .destination__item--name {
        color: white;
        font-size: 36px;
        font-weight: 700;
        padding-bottom: .5em;
        text-transform: uppercase;
    }
    .destination__item--btn {
        background-color: $color__red--primary;
        color: white;
        font-weight: 400;
        font-size: 14px;
        padding: 1em 2.5em;
        transition: all .5s ease;
        text-transform: uppercase;
        &:hover {
            text-decoration: none;
            background-color: $color__red--dark;
            color: white;
        }
    }

说实话，我不知道从哪里开始悬停状态，希望你们能引导我一点点。

Answer 1

您可以在其他示例的鼠标悬停时更改其他div：

.destination__item--jacksonhole:hover + destination__item--name{
        text-align: left;
 }

要更改内容，请检查此Fiddle，链接上的文字已更改。

HTML：

 <article class="destination__item destination__item--jacksonhole">
       <h2 class="destination__item--name">Jackson Hole</h2>
       <a href="#" class="destination__item--btn"><span>Ver más<span></a>
   </article>

CSS：

.destination__item {
    padding: 16em 0;
    text-align: center;
}
    .destination__item--canyons {
        background: url(../images/destinos/dest1.jpg) no-repeat;
        background-size: cover;
    }
    .destination__item--name {
        color:black;
        font-size: 36px;
        font-weight: 700;
        padding-bottom: .5em;
        text-transform: uppercase;
    }
    .destination__item--btn {
        background-color: $color__red--primary;
        color: black;
        font-weight: 400;
        font-size: 14px;
        padding: 1em 2.5em;
        transition: all .5s ease;
        text-transform: uppercase;
        &:hover {
            text-decoration: none;
            background-color: $color__red--dark;
            color: white;
        }
    }
.destination__item:hover .destination__item--name,
.destination__item:hover .destination__item--btn {
    display:block;
    text-align:left;
}
.destination__item:hover .destination__item--btn span{
    display:none;
}
.destination__item:hover .destination__item--btn:after{
    content:"New Content"
}

Answer 2

当然可以，只需将以下内容添加到CSS中：

.destination__item:hover .destination__item--name,
.destination__item:hover .destination__item--btn {
    display:block;
    text-align:left;
}

here是一个有效的例子

在悬停父级时更改子元素

2 个答案: