javascript - 将鼠标悬停在另一个图像上时如何触发图像悬停效果？

Question

我不知道如何让它工作

CSS:

    .name
{
    width: 270px;
    height: 77px;
    position: absolute;
    top: 0px;
    left: 600px;
    -webkit-transition: top 0.3s;
    -moz-transition: top 0.3s;
    -o-transition: top 0.3s;
}

.name:hover
{
    top: 10px;
    -webkit-transition: top 0.3s;
    -moz-transition: top 0.3s;
    -o-transition: top 0.3s;
    font-size: 24px;
}

.photo
{
    width: 270px;
    height: 310px;
    position: absolute;
    top: 77px;
    left: 600px;
    -webkit-transition: top 0.3s;
    -moz-transition: top 0.3s;
    -o-transition: top 0.3s;
}

.photo:hover,
{
    top: 100px;
    -webkit-transition: top 0.3s;
    -moz-transition: top 0.3s;
    -o-transition: top 0.3s;
    font-size: 24px;
}

我想当我将鼠标悬停在 .name 上时，它是一个图像来激活 .photo 悬停效果，反之亦然，有什么想法吗？

Answer 1

/* What you want the thing being hovered over to look like */
.name:hover {
    top: 10px;
    -webkit-transition: top 0.3s;
    -moz-transition: top 0.3s;
    -o-transition: top 0.3s;
    font-size: 24px;
}

/* What you want the thing being hovered over to look like */
.name:hover ~ * {
    /* Some styles */
}

为了让它起作用，您想要设置样式的元素需要是悬停在其上的 .name 元素的同级元素。 ~ 是一个 css 兄弟选择器。