菜單hover效果底部飛入怎么實(shí)現(xiàn)？

這個(gè)菜單hover的css是怎么實(shí)現(xiàn)的？

http://www.html5tricks.com/de...

回答

編輯回答

浪蕩不羈

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        
        li{
            float: left;
            line-break: 30px;
            list-style-type: none;
            margin-right: 5px;
            cursor: pointer;
            text-align: center;
            color: lightcoral;
        }
        li:first-of-type{
            border-right: none;
            color: lightgreen;
        }
        li:last-of-type{
            color: lightblue;
        }
        .bottomLine{
            position: fixed;
            height: 1px;
            transition: 0.3s all ease-in-out;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <div class="bottomLine"></div>
    <head>
        <ul>
            <li class="current">news</li>
            <li>product</li>
            <li>service</li>
        </ul>
    </head>
    <script type="text/javascript" src="jquery-1.10.2.min.js" ></script>
    <script>
        $(document).ready(function(){
            change();
            function change(bold){
                if(bold){
                    $('.bottomLine').css("height","5px")
                }
                var oLeft=$(".current").offset().left;
                var oTop=$(".current").offset().top;
                var height=$(".current").height();
                var width=$(".current").width();
                var color=$(".current").css('color')
                console.log(color)
                $('.bottomLine').css({'background-color':color,'left':oLeft,'top':oTop+height,'width':width+'px'});
            }
        
            $('ul').mouseover(function(e){
                console.log(e.target)
                $('li').removeClass('current');
                $(e.target).addClass('current');
                change(true);
            })
        })
        
    </script>
</body>

</html>

2017年11月6日 16:48