老师我想问一下

老师我想问一下

这儿用那种选择器,我用的感觉都显现不出来图片。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>background-size</title>

    <style type="text/css">

        a{text-decoration:none;}

        ul{list-style:none;}

        div{

            background-image:url("http://img1.sycdn.imooc.com/climg//582c37e50001b08102000065.jpg");

            width:100px;height:100px;

            display:none;border:2px solid red;

            background-repeat:no-repeat;

        }

        .length > h3 >a:hover .length[div]{

            background-size:100px 100px;

            display:block;

        }

        .percent > h3 >a:hover div{

            background-size:50% 50%;

            display:block;

        }

        .cover > h3 >a:hover div{

            background-size:cover;

            display:block;

        }

        .contain > h3 >a:hover div{

            background-size:contain;

            display:block;

        }

        /*补充代码*/

    </style>

</head>

<body>

    <h2>background-size不同属性值不同效果</h2>

    <ul>

        <li  class="length">

            <h3><a href="">100px 100px</a></h3>

            <div></div>

        </li> 

        <li  class="percent">

            <h3><a href="">50% 50%</a></h3>

            <div></div>

        </li> 

        <li  class="cover">

            <h3><a href="">cover</a></h3>

            <div></div>

        </li> 

        <li  class="contain">

            <h3><a href="">contain</a></h3>

            <div></div>

        </li> 

    </ul>

</body>

</html>



正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,一般不会出现同学说的这种情况,如果出现了同学说的假设h3里面有多个元素,鼠标移入其中一个元素,设置div的样式,这种情况无法使用css选择器实现,需要通过js去实现才可以。

同学不用纠结,目前先学习css样式即可,后面学习了js自然就会操作了。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

  • 幻城163630 提问者 #1
    非常感谢老师解惑
    2020-02-05 14:36:40
好帮手慕慕子 2020-02-05 10:40:20

同学你好, 因为a标签与div标签既不是相邻关系也不是后代关系,所以无法使用css选择器通过a找到div。由于h3与div是相邻关系,建议:给h3添加hover伪类,找到相邻的div设置样式。示例:

http://img1.sycdn.imooc.com//climg/5e3a2a5709d5890c10701198.jpg

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

  • 提问者 幻城163630 #1
    好的,谢谢老师。老师我还想问一下以后如果遇见了,这种既不是相邻关系也不是后代关系,并且假设h3里面有几个元素该用哪个那种选择器呢?
    2020-02-05 11:16:04
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师