动态创建的li标签,用css给li标签里的图片添加阴影为什么不成功呢

html-css010

动态创建的li标签,用css给li标签里的图片添加阴影为什么不成功呢,第1张

你动态创建的代码,是把li和img都放到ul里,即类似这样:

<ul id="ps">

    <li></li>

    <img src="images/1.png" alt=""/>

    <li></li>

    .....

</ul>

这样的话,img就不受li的css约束了啊,当然就没阴影了。

应该把img放到li里,再把li放到ul里,即这样:

......

var li = document.createElement("li")

var img = document.createElement("img")

img.src = "images/"+(i+1)+".png"

li.appendChild(img)

ps.appendChild(li)

CSS里面没有点击事件,只能控制鼠标移入的时候显示!

小案例:

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>CSS里鼠标点击div里的LI A时加上背景图片</title>

        <style type="text/css">

         div:hover>a{background: url(img/5.jpg)}

        </style>

    </head>

    <body>

        <div>

         <a href="">百度知道</a>

        </div>

    </body>

</html>

案例截图:为进入

案例截图:进入

1、打开操作软件这里用DW,定义一个css样式,如下图

2、首先看下,背景图效果,如下图所示:

3、在div中添加一个img,输入以下代码。如下图所示:

4、即可实现如题,css图片之上再加一张图片:如下图所示: