• vue中鼠标移入字体下面显示颜色并改变字体颜色的问题


    <template>  

    <div class="smart_nav" :class="{'fixedTop':fixedTop}">
    <!--<div class="smart_nav" :style="{'position':fixedHeight,'top':'top','zIndex':'zIndex'}">-->
    <ul class="smart_nav_con">
    <li class="fl smart_nav_right" :class="colorHover==0?'smart_index':'a_white'"><a class="white a_color" href="#smart_summarize" @mouseenter="spanHover(0)">产品概述</a></li>
    <li class="fl smart_nav_right" :class="colorHover==1?'smart_index':'a_white'"><a href="#smart_advance" @mouseenter="spanHover(1)">产品优势</a></li>
    <li class="fl smart_nav_right" :class="colorHover==2?'smart_index':'a_white'"><a href="#smart_help" @mouseenter="spanHover(2)">帮助文档</a></li>
    <li class="fl" :class="colorHover==3?'smart_index':'a_white'"><a href="#smart_example" @mouseenter="spanHover(3)">客户案例</a></li>
    <li class="span" :style="{'left':left}"></li>
    </ul>
    </div>

    </template>

    <script>

    export default{
    data(){
    return{
    left:0,
    colorHover:0,
    fixedTop:false,
    // fixedHeight:'relative',
    // top:0,
    // zIndex:'0'
    }
    },
    components:{
    websiteHead,
    websiteFoot,
    goTop
    },
    methods:{
    spanHover:function(index){
    this.left = index *300 +'px';
    this.colorHover=index;
    },
    needScroll:function(){
    let scrollt=document.documentElement.scrollTop+document.body.scrollTop;
    //console.log(scrollt)
    if(scrollt>595){
    this.fixedTop=true
    }else{
    this.fixedTop=false
    }
    // if(scrollt>595){
    // this.fixedHeight='fixed';
    // this.top=0;
    // this.zIndex=10
    // }else{
    // this.fixedHeight='relative';
    // this.top=0;
    // this.zIndex=0
    // }
    }
    }
    ,mounted(){
    window.addEventListener('scroll', this.needScroll); //滚动事件监听
    }
    }

    </script>

    <style>

    .smart_nav{
    100%;
    height:54px;
    background:#414b5a;
    position:relative;
    }
    .smart_nav_con{
    1200px;
    height:54px;
    margin:0 auto;
    font-size:14px;
    color:#fff;
    position: relative;
    }
    .smart_nav_con li{
    300px;
    text-align: center;
    line-height:54px;
    }
    .smart_nav_con .smart_index .a_white{
    color:#fff;
    }
    .smart_nav_con .smart_index .a_color{
    color:#00a0e9;
    }
    .smart_nav_con li a{
    color:#fff;
    }
    .smart_nav_con .smart_index a{
    color:#00a0e9;
    }

    .smart_nav_con li{
    line-height:54px;
    }

    /*蓝线*/
    .smart_nav_con .span{
    position:absolute;
    bottom:0;
    display:block;
    36px;
    border-bottom: 4px solid #00A0E9;
    margin-left:128px;
    transition:all 0.5s;
    }

    /*定位的样式*/
    .fixedTop{
    position: fixed;
    left: 0;
    top: 0;
    z-index:2;
    }

    </style>

  • 相关阅读:
    关于CSS自文档的思考_css声明式语言式代码注释
    html5中contenteditable属性如果过滤标签,过滤富文本样式
    web前端工程化/构建自动化
    Python连载19-装饰器
    Java连载1-概述&常用的dos命令
    HTML连载18-id选择器与class区别&class选择器使用思路&后代选择器
    Python连载18-closure闭包解释及其注意点
    HTML连载17-id选择器&类选择器
    Python连载17-排序函数&返回函数的函数
    HTML连载16-颜色控制属性2&标签选择器
  • 原文地址:https://www.cnblogs.com/yingxi0/p/8358336.html
Copyright © 2020-2023  润新知