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

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代码：

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

问题：想法是当用户进入元素内部时 'albumTitleBackground' div 的背景应该是动画的 并且当用户将鼠标悬停在 [=25] 上时必须保持不变=] 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 移动到另一个时，动画可能会重新开始。

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

Code-hovering outer html element when user makes "mouseon" on inner?

html

javascript

css

jquery

hover