鼠标滑过，IE没有效果

yenyen_421 2010-09-06 05:45:58

当鼠标滑过图片时，该图片的右上角会出现一个图标，但IE没有效果，请各位帮帮忙



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>无标题文档</title>

    <style>

        .imagebar {

            width: 100%;

            height: 114px;

            border: 1px solid #000;

            overflow-x: auto;

            overflow-y: hidden;

        }



        .imagebar a {

            position: relative;

            width: 120px;

            height: 100px;

            border: 1px solid #eee;

            display: inline-block;

            margin: 2px;

        }



        .close {

            position: absolute;

            left: -9999px;

            top: 0;

        }



        .imagebar a:hover .close {

            left: 110px;

        }

    </style>

</head>

<body>

<div class="imagebar">

    <a href="#">

        <img src="http://ss5.sinaimg.cn/thumbnail/63340ef5g8f8479e5ce14&690"/>

        <img class="close" src="http://www.mytino.com/profile/images/ico-close2.gif"/></a>

    <a href="#">

        <img src="http://ss5.sinaimg.cn/thumbnail/63340ef5g8f8479e5ce14&690"/>

        <img class="close" src="http://www.mytino.com/profile/images/ico-close2.gif"/></a>

</div>

</body>

</html>

...全文

114 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

aoxls 2010-09-06

打赏
举报

楼上正解，又是IE6的Bug在作怪

IE6中如果a:hover里的样式与原先没有变化，则不会触发a:hover，所以最后那条样式自然不会起作用。

碧海情天-赵亮 2010-09-06

打赏
举报

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>无标题文档</title>

    <style>

        .imagebar {

            width: 100%;

            height: 114px;

            border: 1px solid #000;

            overflow-x: auto;

            overflow-y: hidden;

        }



        .imagebar a {

            position: relative;

            width: 120px;

            height: 100px;

            border: 1px solid #eee;

            display: inline-block;

            margin: 2px;

        }

        .imagebar a:hover {

            border: 1px solid red;

        }



        .close {

            position: absolute;

            left: -9999px;

            top: 0;

        }



        .imagebar a:hover .close {

            left: 110px;

        }

    </style>

</head>

<body>

<div class="imagebar">

    <a href="#">

        <img src="http://ss5.sinaimg.cn/thumbnail/63340ef5g8f8479e5ce14&690"/>

        <img class="close" src="http://www.mytino.com/profile/images/ico-close2.gif"/></a>

    <a href="#">

        <img src="http://ss5.sinaimg.cn/thumbnail/63340ef5g8f8479e5ce14&690"/>

        <img class="close" src="http://www.mytino.com/profile/images/ico-close2.gif"/></a>

</div>

</body>

</html>