为什么鼠标悬停没有效果

来源:2-7 编程练习

天青色烟雨蒙

2019-04-29 12:17:41

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>background-origin</title>

    <style>

        .div1{

            width:220px;

            height:200px;

            border:10px solid rgba(0,255,0,0.3);

            padding:50px;

            background-image:url("http://climg.mukewang.com/582c316e0001fd6507000210.jpg");


        }

        .div1:hover{

            background-image: url("http://climg.mukewang.com/582c316e0001fd6507000210.jpg");

            background-origin: content-box;

            margin-top: 20px;

            margin-left: 20px;

        }

    </style>

</head>

<body>

    <div class="border">

        <a href="#">border-box</a>

        <div class="div1"></div>

    </div>

</body>

</html>



写回答

1回答

好帮手慕星星

2019-04-29

同学你好,鼠标悬停效果是有的,但是图片链接用的是一个,第二张图片链接可以换一下;还有需要设置图片不重复,以及鼠标移入时背景图片的位置,参考:

http://img.mukewang.com/climg/5cc692020001b0f912130540.jpg

可以重新测试下,祝学习愉快!

0

0 学习 · 40143 问题

查看课程