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兄弟选择器。

Answer 2

我会做一个像

这样的课程

.photo:hover, .photo.hover {
    /* CSS */
}

然后在hover元素上切换课程photo。

这个问题是一个javascript解决方案，而不仅仅是CSS。

Answer 3

你可以试试这个：

<强> JS

$('.name').hover(function () {
    $('.photo').addClass('hover');
}, function () {
    $('.photo').removeClass('hover');
});

$('.photo').hover(function () {
    $('.name').addClass('hover');
}, function () {
    $('.name').removeClass('hover');
});

<强> CSS

.name:hover, .name.hover 
.photo:hover, .photo.hover

demo

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

3 个答案: