Question

CSS代码：

div.albumTitleBackground {
        position:absolute;
        z-index:1;
        background-color:whitesmoke;
        /*top:2.5%;
        left:2.5%;
        right:2.5%;
        bottom:2.5%;*/
        top:0;
        left:0;
        bottom:0;
        right:0;
        opacity:0;
        transition:all 0.25s ease-in-out;
    }

    div.albumTitleText {
        display:inline-block;
        font-family:'Times New Roman';
        font-size:6em;
        position:absolute;
        z-index:2;
        color:darkgray;
        top:50%;
        left:5%;
    }`

HTML code：

<div class="albumTitleBackground"></div> <div class="albumTitleText"> @albumPreviewPhoto.ParentAlbumTitle </div>

问题：当用户进入元素时，应该为'albumTitleBackground'div的背景设置动画，并且当用户悬停'albumTitleText'div 时，必须保持相同。哪种方式最简单（和跨浏览器一样）来实现？

Answer 1

将HTML结构更改为

<div class="albumTitleBackground">
    <div class="albumTitleText">
       @albumPreviewPhoto.ParentAlbumTitle
    </div>
</div>

您需要将标题文本包装在标题背景div

中

Answer 2

有三种方法可以做到这一点：

两个涉及更改HTML

1）正如@melwynpawar所说，你需要将你的标题div包装在你的背景div中。

<div class="albumTitleBackground">
    <div class="albumTitleText">
        @albumPreviewPhoto.ParentAlbumTitle
    </div>
</div>

使用CSS：

.albumTitleBackground:hover {
/* Animations Here */
}

2）你可以将它全部包装在容器div中。像这样：

<div class="container">
    <div class="albumTitleBackground"></div>
    <div class="albumTitleText">
        @albumPreviewPhoto.ParentAlbumTitle
    </div>
</div>

和CSS：

.container:hover .albumTitleBackground {
/* Animations Here */
}

然后不更改HTML

3）两个CSS规则

<div class="albumTitleBackground"></div>
<div class="albumTitleText">
    @albumPreviewPhoto.ParentAlbumTitle
</div>

和CSS：

.albumTitleBackground:hover {
/* Animations Here */
}
.albumTitleText:hover .albumTitleBackground {
/* Animations Here */
}

不建议使用最后一个，因为您必须始终检查这两个规则是否相同。请注意，当您从一个div移动到另一个div时，动画可能会重新启动。

当用户在内部制作“mouseon”时，代码悬停外部html元素？

2 个答案: