Question

有人可以查看codepen上的这个示例并告诉我如何获取内容：attr（数据悬停）在IE10 +中工作除了FireFox之外它根本不起作用。它似乎甚至没有为锚点创建：before伪元素。从第40行读取a：课前

HTML：

<nav>
    <ul>
        <li data-content="Home"><a data-hover="Home" href="#">Home</a></li>
        <li><a data-hover="About" href="#">About</a></li>
        <li><a data-hover="Services" href="#">Services</a></li>
        <li><a data-hover="Blogs" href="#">Blogs</a></li>
        <li><a data-hover="Articles" href="#">Articles</a></li>
        <li><a data-hover="Contact" href="#">Contact</a></li>                       
    </ul>
</nav>

CSS：

header nav ul li a:hover:before {
    color: #355b0f;
    padding: 34px 0; 
    position: absolute;
    top: 100%;
    left: 0px;
    width: 100%;        
    text-align: center;
    background: none repeat scroll 0% 0% #fff;      
    display: block;

    transition: #6363CE 0.3s ease 0s;
    -ms-transition: #6363CE 0.3s ease 0s;
    transform: rotateX(-90deg);
    -ms-transform: rotateX(-90deg);
    transform-origin: 50% 0px 0px;
    -ms-transform-origin: 50% 0px 0px;
}

Answer 1

要在Chrome和Safari中进行转换，您需要添加-webkit-transition 也是为了改造 http://www.w3schools.com/cssref/css3_pr_transform.asp

css attr（内容）在IE中不起作用

1 个答案: