css下拉效果。怎样hover时让那个字不上升啊_html/css

首页

web前端

html教程

css下拉效果。怎样hover时让那个字不上升啊_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:41 AM

示例代码是这个 http://www.thibaud.be/#/style04/
自己写了一个但是连续hover时里面的字会上升怎样解决？代码在下面

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        a{            text-decoration: none;            color: #333333;        }        .bar{            list-style: none;            width:200px;            height:50px;            line-height: 50px;            font: "Microsoft YaHei",tahoma,arial,Hiragino Sans GB,\5b8b\4f53;            transition:all 1s ease;            border-bottom-left-radius: 5%;            border-bottom-right-radius: 5%;        }        .bar:hover{            height:80px;        }        .bar:hover a{            transform: translate(80px,0);        }        #bar1{            background: rgba(255, 106 ,106,0.5);        }        #bar2{            background: rgba(106, 90 ,205,0.5);        }        #bar3{            background: rgba(127, 255, 0,0.5);        }        #bar4{            background: rgba(99 ,184, 255,0.5);        }        #bar5{            background: rgba(144 ,238 ,144,0.5);        }    </style></head><body><div id="header">    <div id="nav">        <div id="logo"></div>        <ul>            <li class="bar" id="bar1"> <a href="###">Home</a></li>            <li class="bar" id="bar2"> <a href="###">Product</a></li>            <li class="bar" id="bar3"> <a href="###">Desiger</a></li>            <li class="bar" id="bar4"> <a href="###">Blog</a></li>            <li class="bar" id="bar5"> <a href="###">About</a></li>        </ul>    </div></div></body></html>

回复讨论(解决方案)

        .bar:hover{            height:80px;	   line-height: 80px;        }

一楼正解！！

保证 a 和a:hover 的高度一样，大小一样，就不跑了，也同意1楼

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML文档中的根标签是什么？Apr 29, 2025 am 12:10 AM

theroottaginanhtmldocumentis.servesasthetop-levellementThateNcapsulatesAllotherContent，确保properdocumentstrumentstrumentsureandbrowserparserparsing。

HTML标签和元素是同一件事吗？Apr 28, 2025 pm 05:44 PM

文章解释说，HTML标签是用于定义元素的语法标记，而元素是完整的单位，包括标签和内容。他们一起工作以构建网页。查拉克计数：159

＆lt; head＆gt;的意义是什么。＆＆lt;身体＆gt;在html中标记？Apr 28, 2025 pm 05:43 PM

本文讨论了Lt; Head＆gt; ＆＆lt;身体＆gt; HTML中的标签，它们对用户体验的影响以及SEO的影响。正确的结构增强了网站功能和搜索引擎优化。

＆lt; strong＆gt;，lt; b＆gt;有什么区别标签和lt; em＆gt;，＆lt; i＆gt;标签？Apr 28, 2025 pm 05:42 PM

本文讨论了HTML标签，和和关注其语义与表现用途及其对SEO和可访问性的影响之间的差异。

请说明如何指示HTML中文档使用的字符集？Apr 28, 2025 pm 05:41 PM

文章讨论了在HTML中指定字符，重点介绍了UTF-8。主要问题：确保正确显示文本，防止乱七八糟的字符，并增强SEO和可访问性。

HTML中的各种格式标签是什么？Apr 28, 2025 pm 05:39 PM

本文讨论了用于构建和造型Web内容的各种HTML格式标签，强调了它们对文本外观的影响以及语义标签对可访问性和SEO的重要性。

HTML元素的' ID”属性与'类”属性之间有什么区别？Apr 28, 2025 pm 05:39 PM

本文讨论了HTML的“ ID”和“类”属性之间的差异，重点是它们的独特性，目的，CSS语法和特异性。它解释了它们的使用如何影响网页样式和功能，并为

HTML中的'类”属性是什么？Apr 28, 2025 pm 05:37 PM

本文解释了HTML“类”属性在分组样式和JavaScript操纵元素中的作用，将其与唯一的“ ID”属性进行对比。

See all articles

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。