IE浏览器下透明背景元素hover无效

作者: 捷搜索 | 来源:发表于2018-09-14 09:20 被阅读2次

    本文来源于 捷搜索

    问题:

    IE下透明背景元素,鼠标移到文字上才会触发hover,当移到文字旁边的背景上不会触发hover,如下案例(代码+效果图):

    1536128629714760.png
    <html>
    <head>
    <meta charset="utf-8">
     
    <style>
    ul{
        position: absolute;
        z-index: 999999;
        width: 98%;
    }
    ul li a{
        display: block;
        height: 60px;
        line-height: 60px;
        width: 100px;
        color: white;
    }
    ul li a:hover{
        color: #ffda00;
        border-bottom: 3px solid #ffda00;
    }
    </style>
     
    </head>
    <body>
    <ul>
        <li><a href="/">首&nbsp;&nbsp;页</a></li>
        <li><a href="/cases">成功案例</a></li>
        <li><a href="/about">关于我们</a></li>
        <li><a href="/news">新闻资讯</a></li>
        <li><a href="/contact">联系我们</a></li>
    </ul>
    </body>
    </html>
    

    原因&解决办法:

    IE下透明背景没有hover事件,所以我们要为其元素添加一个空的背景图片。

    解决:

    把问题中代码ul li a添加css:

    background-image:url(about:blank);
    

    相关文章

      网友评论

        本文标题:IE浏览器下透明背景元素hover无效

        本文链接:https://www.haomeiwen.com/subject/ytmvgftx.html