网页开发中的鼠标移动到一个元素A身上时

在Web开发中，经常需要将鼠标移到元素A上时显示另一个元素B。如下图所示

将鼠标移到图片上时，相关描述将显示在下面。

CSS实现的原理和场景：

示例代码：

html

    
    

        
标题1
        
描述描述描述描述描描述描述描述描述描述描述描述描述描
css
.recommends-content-item{
    width: 33%;
    height: 280px;
    margin-right: 1rem;
    /* height: 15rem; */
    background: #eee;
    position: relative;
}
			.recommends-content-item:hover .recommends-content-item__info{
    opacity: 1;
    transform:  translateY(0);
}
.recommends-content-item__info{
    position: absolute;
    bottom: 0;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(34,34,34,0.35);
    padding: 0 0.5rem;
    text-align: center;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    transition: 0.3s;
    opacity: 0;
    transform:  translateY(100%);
}
当然，如果a和b元素具有相同的父元素，则原理相同。father：hover .b {display：block}可以达到类似的效果。
					

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-352665-1.html