<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{
width:100%;
height:54px;
background:#414b5a;
position:relative;
}
.smart_nav_con{
width:1200px;
height:54px;
margin:0 auto;
font-size:14px;
color:#fff;
position: relative;
}
.smart_nav_con li{
width: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;
width:36px;
border-bottom: 4px solid #00A0E9;
margin-left:128px;
transition:all 0.5s;
}

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

</style>

vue中鼠标移入字体下面显示颜色并改变字体颜色的问题的更多相关文章

  1. vue的鼠标移入和移出

    vue的鼠标移入和移出 需求(鼠标到预约二维码显示,预约添加背景色) 实现 <!--html部分--> <ul class="person_list"> / ...

  2. CSS实例:鼠标滑过超级链接文字时改变背景颜色

    先讲简单的: 通过CSS可以设置超链接在不同时刻的颜色: <style> a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #0 ...

  3. 嵌入式Qt-4.8.6显示中文并且改变字体大小和应用自己制作的字体库

    问题: QT4.8.6在移植到开发板上的时候,中文支持是必不可少的,如何让QT支持中文,如何制作QT支持的字体文件,如何使QT UI编辑器中的字号与开发板中的字号一致. 详解: 1>如何让QT支 ...

  4. Egret中图片颜色的改变,颜色矩阵

    参考: 图片处理:颜色矩阵和坐标变换矩阵 Egret-滤镜 之前面试有问到如何改变图片的颜色.貌似之前做Flash的时候做过,做Egret后没有此类需求,所以一直没有研究过. 现在来弄一弄如何改变图片 ...

  5. vue中文章的折叠于显示全部

    在以一篇文章中,可能文章特别长,但是在页面第一次显示的时候可能就只需要显示一部分,这种情况下就需要自己进行修改 基本思路 利用类名就是预先定义一个类名,设置高度,和overflow:hidden,前提 ...

  6. 030——VUE中鼠标语义修饰符

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. vue中v-show和v-if在显示和隐藏元素上的区别

    v-show将元素隐藏是在dom节点上加style='display:none' v-if是直接将元素完全去掉 拿v-show示例,(v-if 也是一样,把下面的代码中v-show替换成v-if即可运 ...

  8. angularjs鼠标移入移出实现显示隐藏

    <tr ng-repeat="item in items track by $index"> <td data-title="操作" alig ...

  9. CSS笔记 - fgm练习 - 鼠标移入移出div显示隐藏 CSS样式部分

    问题总结: 1. checkbox和下面隐藏的div对齐,是在清除了默认样式的前提下,而不需要额外设置float: left; 2. 隐藏的div这里不需要专门设置宽高.居中,是靠内容和padding ...

随机推荐

  1. python3学习笔记四(列表1)

    参考http://www.runoob.com/python3/python3-list.html 序列 python包含6种内建的序列:列表,元组,字符串,Unicode字符串,buffer对象和x ...

  2. *浅解嵌入式中的BootLoader

    本文只作为本人学习过程中的记录及时不时的突发奇想偶记.鄙人菜鸟一只,文中如有错误或疏漏,若读者肯不吝赐教,在下感激零涕.文章一直不断更新中 一.何为Bootloader 在嵌入式系统中,Bootloa ...

  3. MySQL 之 MHA + ProxySQL + keepalived 实现读写分离,高可用(二)

    ProxySQL安装 yum/rpm安装 在github或官网上可以下载rpm包,wiki的Getting start章节有详细介绍. cat <<EOF | tee /etc/yum.r ...

  4. C# 语言历史版本特性(C# 1.0到C# 7.1汇总更新)

    历史版本C#作为微软2000年以后.NET平台开发的当家语言,发展至今具有17年的历史,语言本身具有丰富的特性,微软对其更新支持也十分支持.微软将C#提交给标准组织ECMA,C# 5.0目前是ECMA ...

  5. 涂抹mysql笔记-数据库中的权限体系

    涂抹mysql笔记-数据库中的权限体系<>能不能连接,主机名是否匹配.登陆使用的用户名和密码是否正确.mysql验证用户需要检查3项值:用户名.密码和主机来源(user.password. ...

  6. Java --Servlet 32个经典问题

    Servlet方面 1.说一说Servlet的生命周期? Servlet有良好的生存期的定义,包括加载和实例化.初始化.处理请求以及服务结束.这个生存期由javax.servlet.Servlet接口 ...

  7. 面试回顾——session相关

    原地址:https://blog.csdn.net/quiet_girl/article/details/50580095 Session结束生命周期的几种情况: (1)客户端关闭浏览器(只针对ses ...

  8. JavaScript倒计时实现

    /** * 倒计时函数 * @param {String}} endTime 终止时间戳 */ const countDown = (endTime, callback) => { const ...

  9. BASEDIR

    1)正常写python程序会有一个可执行的bin.py文件,假如这个文件需要导入my_module里面定义的模块,应该怎么设置sys.path(此时可以直接导入), 因为bin和model属于同级目录 ...

  10. [C语言]进阶|链表

    --------------------------------------------------------------------------------------- 可变数组: array. ...