div css鼠标悬停锚文本超链接文字背景颜色或图片变化

div css鼠标悬停锚文本超链接文字背景颜色或图片变化(体感音乐)

css鼠标悬停超链接文字上时背景改变,鼠标经过文字链接时(悬停),文字的背景图片发生改变(出现背景图片或背景颜色)。

鼠标经过悬停在超链接文字上时背景颜色或背景图片出现或改变教程篇。(体感音乐

此DIV CSS布局技巧其实是对a标签做鼠标经过CSS样式。利用以下代码:

a{...} 原始超链接默认样式设置
a:hover{...}鼠标悬停经过时超链接锚文本CSS样式(扩展阅读:ie6 hover)
一、链接文字无背景鼠标经过悬停出现背景颜色 - TOP(体感音乐

当鼠标经过无背景颜色和背景图片的文字超链接时(悬停),超链接锚文本文字背景出现背景颜色。

用到CSS属性单词:
background+具体颜色值

我们通过实例实现鼠标经过a链接css背景颜色改变,我们对超链接a标签外加个div盒子css命名为".divcss5-abc"

1、完整实例HTML源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>a背景颜色改变</title>
<style>
.divcss5-abc a{ color:#000}/* css注释说明:超链接颜色为黑色 */ (体感音乐)
.divcss5-abc a:hover{ background:#00F; color:#FFF}
/* css 注释说明:鼠标经过悬停超链接时字体颜色为白色,背景为蓝色*/
</style>
</head>

<body>
<div class="divcss5-abc">
欢迎来到<a href="http://www.divcss5.com/">divcss5</a>
</div>
</body>
</html>

2、背景颜色改变实例截图

鼠标经过背景颜色为蓝色字体为白色
鼠标经过背景颜色为蓝色字体为白色

以上通过对a标签设置鼠标经过时“a:hover”背景颜色出现为蓝色。
二、鼠标经过文字链接背景变为图片 - TOP

当鼠标经过超链接的文字时,文字背景将图片作为背景。

我们通过实例实现鼠标经过a链接背景改变为图片,我们对超链接a标签外加个div盒子css命名为".divcss5-def"

1、完整HTML+css代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>a背景改变</title>
<style>
.divcss5-def a{ color:#000; padding:10px 10px; line-height:30px}/* css注释说明:超链接颜色为黑色 */
.divcss5-def a:hover{color:#FFF; background:url(bj.gif) no-repeat center}
/* css 注释说明:鼠标经过悬停超链接时字体颜色为白色,背景为图片*/
</style>
</head>

<body>
<div class="divcss5-def">
欢迎来到<a href="http://www.divcss5.com/">divcss5</a>
</div>
</body>
</html>

2、文字链接鼠标经过背景改变为图片实例截图

鼠标经过悬停在超链接文字上时背景变为图片
鼠标经过悬停在超链接文字上时背景出现图片效果截图

div css鼠标悬停锚文本超链接文字背景颜色或图片变化

时间: 2024-10-19 22:49:25

div css鼠标悬停锚文本超链接文字背景颜色或图片变化的相关文章

DIV CSS鼠标经过悬停在图片上时图片上方显示文字(转)

DIV CSS鼠标悬停在没有文字内容图片上时图片上方显示文字,完全是纯css div实现.CSS实现鼠标悬停放图片上方时显示美化内容. 原始图片显示没有文字在上方,当鼠标经过悬停时显示文字并且文字背景为半透明.可以使用纯DIV+CSS实现鼠标悬停图片上显示文字内容. 纯div+css实现第一张图片没有文字内容,鼠标悬停时出现第二张图那样效果 使用div css实现鼠标悬停图片上方时显示文字内容原理: 首先我们设置一个盒子对象,并且将图片使用style标签内设置为CSS背景图片,同时设置该对象ht

Web前端技术:CSS部分初识--行内样式、内嵌样式、外部样式,CSS的优先级,CSS的选择器,各种CSS样式(文本与文字、颜色的表示、背景的设置、超链接、列表、表格、图片)

一.CSS样式 1.行内样式:直接写在body的内部标签里,如下就是行内样式 2.内嵌样式:写在head的style标签内,如下就是内嵌样式 3.外部样式:css样式单独写在一个.css文件里,使用时,在HTML的head内用link标签引用即可 二.CSS的优先级 三.CSS的选择器 选择器是一种选择方式.选中你想要的元素的方法,称之为“选择器”  1.全局选择器:*  2.标签选择器:p.span.a.h1~h6.ul.ol  3.类选择器:.one  4.id选择器:#left  5.后代

经典的 div + css 鼠标 hover 下拉菜单

经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> <style type="text/css"> nav { margin:100px auto; text-align:center; } nav ul { border-radius:10px; background:linear-gradient(to bottom,#

HTML+CSS鼠标悬停效果

HTML+CSS实现鼠标悬停效果 HTML: <link href="style.css" rel="stylesheet"> <a class="social" href="https://webbb.be" target="_blank"> <div class="front"> <i class="fa fa-facebook&q

CSS鼠标悬停图片加边框效果,不位移的方法

<!DOCTYPE HTML> <html lang="en-US"> <head> <title>css实现鼠标悬停时图片加边框效果</title> <style type="text/css"> body{background:#222;color:#06c;} em{ font-style:inherit;} img{background:white;margin:0 5px;width:

【学习笔记01】:hover为DIV添加鼠标悬停时改变颜色的效果

:hover所有主流浏览器都支持(IE6.0以下支持不好,以后再学习用Javascript来实现悬停效果) 这是一个绿色底白色Icon的搜索按钮 CSS部分: #top_search { background-color: #24890D; border: 16px solid #24890D; width: 16px; height: 16px; float: right; } HTML部分: <div id="top_search"> <img src="

CSS鼠标悬停图片上图片变灰 变色 半透明

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

鼠标悬停显示隐藏省略文字

.title_content{ font-size:14px; margin: 10px 5px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; } .title_content:hover{ text-overflow:inherit; overflow: visible; white-space: pre-line; } <div  class='title_content'>隐藏ellipsis</div&

为gridview的每个单元格添加鼠标悬停提示文本(tooltip)

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)    {        for (int i = 0; i < e.Row.Cells.Count; i++)//获取总列数        {            //如果是数据行则添加title            if (e.Row.RowType ==DataControlRowType.DataRow )            {/