css样式hover效果 css hover

css的hover用法

元素添加hover伪类选择器时候一定要 紧贴 这hover， 不能有空格 ，有空格的话表示给该元素的所有子元素设置里hover样式。

错误例子：

ul :hover{} //ul的所有子元素设置了hover样式

正确例子：

ul:hover{} //ul会显示出想要的效果

ul:hover .one{ // 子元素写在hover后面空格隔开

              transform:rotateY(90deg);

          }

 ul:hover .two{

              transform:rotateY(0deg);

          }

ul:hover .thr{

              transform:rotateY(360deg);

          }

仅可以给自身的子元素设置样式 ，给其他元素子元素设置无效

接着上个例子举例子：

div:hover .one{}//不显示任何效果，hover失效

给兄弟元素设置：

ul:hover+.one

相关问答

Q1: 内联css怎么使用hover效果

单纯只css做不到这个要求，hover的使用方法如下：

head

title/title

    style type="text/css"

        a:link{color: #F00;}

        a:visited{color: #00F;}

        a:hover{color: #0F0;}

        a:active{color: #FF0;}

/style

/head

body

    p style="color:#399"a href="#"文字/a/p

/body

/html

但是可以用js辅助完成这个效果，使用onMouseOver（鼠标移到目标上）和onMouseOut（鼠标移开目标后）实现对a标签或其它html标签设置hover样式。

直接对标签使用即可，无论A标签、SPAN标签、DIV标签等均可。

a style="color:#00F; text-decoration:none"

 onMouseOver="this.style.color='#F00';this.style.textDecoration='underline'"

 onMouseOut="this.style.color='#00F';this.style.textDecoration='none'"

     DIVCSS5

/a

以上对a超链接代码设置默认样式、鼠标移到目标上、鼠标移开目标后样式。特点代码比较长。

DIVCSS5重要提示说明：为了看到鼠标移开后与默认样式相同，通常需要直接对标签使用style设置默认CSS样式并且与onMouseOut设置CSS样式保持相同。以免初始状态对象样式与鼠标移开对象后样式的不同。

但是另外需要注意：淘宝的描述页是无法使用外置css或者js模块的，外置css模块需要购买，js模块还没有开放

Q2: css3有哪些不错的hover效果

CSS3在hover下的几种效果代码分享，CSS3在鼠标经过时的几种效果集锦

效果一：360°旋转 修改rotate(旋转度数)

01 * {

02 transition:All 0.4s ease-in-out;

03 -webkit-transition:All 0.4s ease-in-out;

04 -moz-transition:All 0.4s ease-in-out;

05 -o-transition:All 0.4s ease-in-out;

06 }

07 *:hover {

08 transform:rotate(360deg);

09 -webkit-transform:rotate(360deg);

10 -moz-transform:rotate(360deg);

11 -o-transform:rotate(360deg);

12 -ms-transform:rotate(360deg);

13 }

效果二：放大 修改scale(放大的值)

01 * {

02 transition:All 0.4s ease-in-out;

03 -webkit-transition:All 0.4s ease-in-out;

04 -moz-transition:All 0.4s ease-in-out;

05 -o-transition:All 0.4s ease-in-out;

06 }

07 *:hover {

08 transform:scale(1.2);

09 -webkit-transform:scale(1.2);

10 -moz-transform:scale(1.2);

11 -o-transform:scale(1.2);

12 -ms-transform:scale(1.2);

13 }

效果三：旋转放大 修改rotate(旋转度数) scale(放大值)

01 * {

02 transition:All 0.4s ease-in-out;

03 -webkit-transition:All 0.4s ease-in-out;

04 -moz-transition:All 0.4s ease-in-out;

05 -o-transition:All 0.4s ease-in-out;

06 }

07 *:hover {

08 transform:rotate(360deg) scale(1.2);

09 -webkit-transform:rotate(360deg) scale(1.2);

10 -moz-transform:rotate(360deg) scale(1.2);

11 -o-transform:rotate(360deg) scale(1.2);

12 -ms-transform:rotate(360deg) scale(1.2);

13 }

效果四：上下左右移动 修改translate(x轴,y轴)

01 * {

02 transition:All 0.4s ease-in-out;

03 -webkit-transition:All 0.4s ease-in-out;

04 -moz-transition:All 0.4s ease-in-out;

05 -o-transition:All 0.4s ease-in-out;

06 }

07 *:hover {

08 transform:translate(0,-10px);

09 -webkit-transform:translate(0,-10px);

10 -moz-transform:translate(0,-10px);

11 -o-transform:translate(0,-10px);

12 -ms-transform:translate(0,-10px);

13 }

Q3: css样式hover状态变为其他字

修改文字内容，通常是通过 JS 来修改。

当鼠标悬浮时，通常使用伪元素:hover 来修改样式，如何在鼠标悬浮时修改html内容？

:hover 是无法修改html 内容，但是可以通过一系列的样式变化，达到当鼠标悬浮时，改变html内容。

用JS可以通过innerHtml来修改，在此不介绍。

纯CSS实现鼠标放上去改变文字内容

先上代码 html

div class="par"

div class="show"

平时显示的文字

div class="hover-show"

鼠标悬浮时显示的文字

/div

/div

/div

1

2

3

4

5

6

7

8

1

2

3

4

5

6

7

8

css 部分

.par {

width: 300px;

height: 30px;

margin: 100px auto;

font-size: 20px;

line-height: 30px;

background-color: #ff000020;

overflow: hidden;

}

.par .show:hover {

padding-top: 30px;

}

.par .hover-show {

margin-top: -60px;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

实际效果

在这里插入图片描述

先把父元素的 overflow: hidden; 注释掉看看效果

平常状态

在这里插入图片描述

鼠标悬浮时的状态

在这里插入图片描述

带有背景色的为父盒子.

思路：

给父盒子设置高度，并且设置溢出隐藏

需要鼠标悬浮时显示的文字需要嵌套在平时显示文字的盒子里

给悬浮时显示的文字的盒子添加 margin-top:-60px，-60px 通常为两倍行高。

给平时显示的文字的盒子添加鼠标悬浮样式·padding-top: 30px;· 30px 通常为文字行高。

这样就可以达到鼠标悬浮时改变文字内容的效果了。

注意：

margin 值和 padding 值可根实际情况调整；

嵌套关系为 父元素，平时显示文字的盒子，鼠标悬浮时显示的文字，后面两个盒子不能同级，否则鼠标悬浮时，会出现不准确跳动的问题。

打开CSDN，阅读体验更佳

html鼠标悬停显示字体_洛神在学习的博客_html鼠标悬停...

html鼠标悬停提示文字 weixin_44226752的博客 8963 本来打算写js事件,然后发现HTML自带了这个属性,在标签中加title=“要显示的内容” 就可以了注意:a标签,img标签,div标签、span标签、li标签、p标签、b标签等等html标签都可以在标签内加...

...显示文字_蜗牛慢慢向上爬的博客_html 鼠标悬停显示文字

实现鼠标悬停显示文字,html中使用title属性就可实现显示文字的效果,这个属性还是比较实用的,需要的朋友可以参考下 a href=# title="这里是显示的文字"hello/a 当鼠标悬停在 hello上一回就会有文字 这里是显示的文字 显示。

css：hover鼠标放上去字体变大 transform: scale

over鼠标放上去字体变大 transform: scale

继续访问

纯CSS实现鼠标放上去改变文字内容

主要介绍了纯CSS实现鼠标放上去改变文字内容,需要的朋友可以参考下

css 实现按钮样式使用背景图或者背景色，鼠标放上去按钮改变背景图或者背景色

1、css 实现按钮样式使用背景色，鼠标放上去按钮背景色，不需要过渡效果的把transition 两句去掉。 鼠标放上去： button type="button" class="el-button"span确定/span/button button{ outline: 0; } .el-button { padding: ..

继续访问

当鼠标放上去的时候出现文字

javascrip效果，当鼠标放上去的时候出现文字。

html替代文本,摆脱对悬停的HTML替代文本

我试图创建一个图像的页面，我已经通过添加标题，只有当每个图像都悬停时出现的花色。但是现在我遇到了重复字幕的问题，因为看起来白色字幕框在图片悬停时我的鼠标也出现在任何地方。我认为有人说这是替代文字或其他东西，但我不确定。无论如何，我想删除它，所以我没有干扰我的其他更好的悬停标题。我无法附上图片，但希望您了解我的问题。摆脱对悬停的HTML替代文本我使用的代码如下：a.hovertext {positi...

继续访问

Vue中鼠标悬停更换图片/文字内容，动态展示/修改某些属性

Vue中鼠标悬停更换图片/文字内容，动态展示/修改某些属性 鼠标悬停时：@mouseenter 鼠标离开时：@mouseleave 利用以上来绑定相应方法，例如： div @click="finance" @mouseleave="changeImageSrc(1, '')" @mouseenter="changeImageSrc(1, 'hover')" //分别为鼠标悬停时和离开时绑定方法changeImageSrc，并传递参数 img :src="ci

继续访问

html 鼠标悬停时字体变样,css实现鼠标滑过改变文字的方法

css实现鼠标滑过改变文字的方法同学你们知道怎么实现css鼠标滑过改变文字的效果吗？下面小编给大家整理了css实现鼠标滑过改变文字的方法，供大家参阅。代码如下:#Menu {width:500px;margin:50px auto;border:1px solid #CCC;overflow:hidden;}#Menu ul {margin:0;padding:0;list-style:none;...

继续访问

最新发布 el-select下拉框选项的样式修改(背景色、hover、字体等)

上图中显示的是当选中el-select的选项时页面的结构，选项的容器并不在挂载的div#app中，而是div#app的兄弟元素，我们在组件中设置样式的时候，加上了scoped，作用域都是局限在div#app中，所以设置的样式就无法正常作用到选项内容的div上。Popper-append-to-body属性是Element-UI官方文档中提供的一个属性，该属性的用途就是将el-select选项的内容移动div#app当中，默认值是true，下面一张图是将该属性设置为false时的DOM结构展示。

继续访问

CSS:通过hover控制切换固定栏内容

CSS:通过hover控制切换固定栏内容

继续访问

html鼠标悬停下面变换,javascript实现鼠标放上后下边对应内容变换的效果

本文实例讲述了javascript实现鼠标放上后下边对应内容变换的效果。分享给大家供大家参考。具体如下：这是个网上比较常见的菜单效果，鼠标放上后相应的内容会切换，图文布局方式。技术方面，是JS和CSS相配合来实现，代码中的JS部分，你可以单独摘取出来保存成一个JS文件，然后引入到页面中，这样使主页面代码简洁些。本效果在ie、火狐等浏览器下测试正常。运行效果如下图所示：具体代码如下：鼠标放上后下面的...

继续访问

CSS 鼠标移入显示提示说明文本

1. 在需要使用的地方写上 html。

继续访问

Html代码问题：用鼠标悬停在文字上文字的颜色就变颜色的效果

这种一般是借助hover事件，就是说当鼠标放到文字上时会触发一个事件，此时可以修改文字的样式。另外一种简单的办法就是直接用css的hover属性设置样式。a.tt:hover {color: #FF0000;}------/////直接用css的hover属性设置样式。保存.css, 在html代码引用！a class="tt" href="test.html"test/a...

继续访问

hover在两种情况下的两种用法

:hover在鼠标移到链接上时添加的特殊样式。 提示: :hover 选择器器可用于所有元素，不仅是链接。 提示: :link 选择器设置了未访问过的页面链接样式, :visited 选择器设置访问过的页面链接的样式 :active选择器设置当你点击链接时的样式。 注意: 为了产生预期的效果，在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后！！ 前两天遇到一个关于...

继续访问

Vue中实现鼠标悬浮完成图片替换

最近在做一个小项目，要实现的功能是在鼠标悬浮时，完成其图片更换。再三思索了好久，本来打算通过css来实现，貌似发现在vue中img标签的src更改好像没法通过css来实现，于是便转换了种方法，通过一些函数来实现。闲话少说，具体实现如下。 ...

继续访问

热门推荐 css设置鼠标放上显示文字的方法

1、使用div和span定义将在图片上要出现的文字，可以通过 div 和 span 将 HTML 元素组合起来。 代码如下： div span这是要在图片上出现的文字/span /div 2、给div元素添加背景图片，并且设置大小；给文本元素span添加“display:none;”样式使其不显示，代码如下： background-image:url(图片名称); wi

继续访问

原生js实现 悬浮当前文本 判断如果为空时 显示当前文本的提示内容

原生js实现 悬浮当前文本 判断如果为空时 显示当前文本的提示内容

继续访问

用css实现鼠标移过某个元素使元素的样式发生变化

用css实现鼠标移过某个标签使标签的样式发生变化 正在学习大前端中，有代码和思路不规范不正确的地方往多多包涵，感谢指教 在很多项目里面都会有这样一个功能，那就是鼠标飘过某个元素时，元素的样式发生变化，这里我们就用到了hover来进行实现 代码如下 !DOCTYPE html html lang="en" head meta charset="UTF-8" titleTitle/title

继续访问

css中hover属性的使用技巧

hover属性用不同的书写方式，来改变不同关系的元素样式。 元素:hover 表示聚焦后改变自己 元素:hover 元素 表示聚焦后改变其子元素 元素:hover + 元素 表示聚焦后改变其指定的“亲兄弟”（条件是该兄弟元素与其相邻）元素 元素:hover ~ 元素 表示聚焦后改变其指定的兄弟元素，两个元素相不相邻都行。 示例： .first:hover {color: white;}/* 聚焦我改变自己 */ .three:hover .three-son {font-size: 20px.

继续访问

margin值根据标签文本内容变化

项目中遇到的问题，生产商信息这个页面，每个生产商信息会出现有时字多，有时字少的情况，为了保持在字数变多的情况下margin值缩小，字数变少的情况下margin值变大，整体页面布局会更美观，用JS判断，demo如下； HTML部分 名 称:(说)分的呵呵的的额的的的

继续访问

HTML实现鼠标悬浮、移走图片更改效果的几种方法

1，通过更改图片坐标，对图片添加阴影实现更改图片的颜色 原图片效果展示：2，通过jQuery中的鼠标悬浮和移除时间更改图片效果 效果图：

继续访问

html鼠标悬停改变文字

html

css

写评论

评论

Q4: Hover.css 动画库源码样式解读

hover.css 是一个CSS3的鼠标悬停效果，可应用于链接，按钮，徽标，SVG，特色图像等。

下面是一些常用的效果源码

关于css样式hover效果和css hover的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。