鼠标划过上移

Posted 2020-08-24 TTTK

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了鼠标划过上移相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标滑过内容上移</title>
    <style>
        ul,li,i,div,h3,p,label{margin: 0;padding: 0;}
        .ul1 li{position:relative;width: 250px;height: 200px;list-style: none;overflow: hidden;box-shadow:0 5px 10px  rgba(0, 0, 0, 0.0980392);color:#93999f;cursor: pointer;border-radius: 5px;}
        .ul1 i{display:block;width: 250px;height: 150px;background: #bce8f1;}
        .ul1 div{width: 250px;height: 144px;}
        .ul1 div .label1{position: absolute;top:130px;background: white;transition: all 0.5s;}
        .ul1 li:hover{box-shadow:0 5px 20px  rgba(0, 0, 0, 0.298039); }
        .ul1 li:hover .label1{top:100px;}
        .ul1 div h3{font-size: 14px;margin-top: 33px;color: #444;}
        .ul1 div p{height: 40px;font-size: 12px;}
        .ul1 .label2{position: absolute;width: 250px;bottom: 0;height: 20px; background: white;}
        .color-red{color: red;}
        .r{float: right}
    </style>
</head>
<body>
    <ul class="ul1">
        <li>
            <i></i>
            <div>
                <label class="label1">
                    <h3> 组件方式开发 Web App全站 </h3>
                    <p>  用HTML5/CSS3/JS流行技术，以组件式开发WebApp全站。</p>
                </label>
                <label class="label2">
                    <span class="l color-red">￥78.00</span>
                    <span class="r">1878人在学</span>
                </label>
            </div>
        </li>
    </ul>
</body>
</html>

以上是关于鼠标划过上移的主要内容，如果未能解决你的问题，请参考以下文章

求一个java图片浏览器的源代码，拜托大家了！！！

delphi ListView 如何改鼠标划过时的底图？

鼠标划过显示浮层

JS---案例：表格隔行变色(鼠标划过背景色恢复)

鼠标划过图片进行缩放效果

自写：js轮播图鼠标划过下方按钮，继续下一个