CSS中a:hover在浏览器中无法显示

最新推荐文章于 2021-12-22 14:39:49 发布
最新推荐文章于 2021-12-22 14:39:49 发布
阅读量1.2k 收藏
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vivi_csdn/article/details/46279709
版权 

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">用HTML和CSS做背景图片定位的静态页面 </span>

此行代码一直不起作用，

#h a:hover{background:transparent url(bg.gif) 0 -55px no-repeat;}

发现要将display设为block;

正确代码如下

html：

<span style="font-size:24px;"><!doctype html>
 <head>
  <link rel="stylesheet" type="text/css" href="text2.css">
 </head>
 <body>
  <ul>
  <li id="h"><a href="#">HTML</a></li>
  <li id="b"><a href="#">Javascript</a></li>
  <li id="s"><a href="#">ServerSide</a></li>
  <li id="d"><a href="#">ASP.NET</a></li>
  <li id="x"><a href="#">XML</a></li>
  <li id="m"><a href="#">Web Services</a></li>
  <li id="w"><a href="#">Web Building</a></li>
  </ul>
 </body>
</html></span>


css: 

ul{
	height:55px;
	width:1125px;
	margin:0;
	padding:0;
	background:transparent url(bg.gif) 0 0 no-repeat;
}

li
{	
	float:left;
	text-indent:-9999px;
}
li a{
	display:block;
	height:55px;
	}

#h	{left:0px;width:155px;}
#b	{left:155px;width:157px;}
#s	{left:312px;width:167px;}
#d 	{left:479px;width:158px;}
#x	{left:637px;width:101px;}
#m	{left:738px;width:185px;}
#w	{left:923px;width:177px;}

#h a:hover{background:transparent url(bg.gif) 0 -55px no-repeat;}
#b a:hover{background:transparent url(bg.gif) -155px -55px no-repeat;}
#s a:hover{background:transparent url(bg.gif) -312px -55px no-repeat;}
#d a:hover{background:transparent url(bg.gif) -479px -55px no-repeat;}
#x a:hover{background:transparent url(bg.gif) -637px -55px no-repeat;}
#m a:hover{background:transparent url(bg.gif) -738px -55px no-repeat;}
#w a:hover{background:transparent url(bg.gif) -923px -55px no-repeat;}


下面是bg.gif图片


vivi_csdn
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用a标签无法跳转到指定网页的解决办法_艾孜尔江撰
艾孜尔江的博客
08-07 12万+
平时HTML中的a标签是我们十分喜爱使用的，但是就是这样的简单基础的标签有时候会出现我们意想不到的问题。 首先来一段测试，以复现问题，使用一堆url，动态创建多个a标签，撰写如下所示的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt..
CSS a:hover伪类在IE6下的问题
09-25
标题中的“CSS a:hover伪类在IE6下的问题”指的是在Internet Explorer 6浏览器中，CSS的`:hover`伪类存在一些不兼容性的问题。`:hover`伪类通常用于定义鼠标悬停时元素的样式，它在现代浏览器中广泛应用于链接、按钮...
在CSS中定义A:active/A:link/A:visited/A:hover顺序
weixin_34389926的博客
09-18 489
以前用CSS一直没有遇到过这个问题，在最近给一个本科同学做的项目里面。出现一些问题，搜索引擎查了一些网站和资料，发现很多人问到这个问题，给出的结果我试了试，大部分都不正确。 给出我试的顺序，可能会对大家有一些帮助： A:link {color: #000000;TEXT-DECORATION: none}A:visited {COLOR: #000000; ...
CSS a:hover
qq_28499043的博客
09-12 4929
css样式的a:hover
hover控制的样式在chrome浏览器中不生效的问题
weixin_42180591的博客
12-22 633
在使用调试工具的情况下，可以点击如下位置，即 toggle device toolbar(切换设备工具栏) ，将移动端设备调试关闭，切换为PC端调试
css伪类hover ie6bug，揭开IE6下hover不显示原因
niityangjun1的专栏
04-24 946
:hover是我们在CSS设计中最常运用的伪类之一，许多绚丽效果的实现离不开伪类:hover，比如我们常见的纯CSS菜单、相册效果等等。或许用了这么久的伪类:hover，还有部分朋友还不完全了解hover的规则：在CSS1中此伪类仅可用于a对象。且对于无href属性（特性）的a对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。 但目前IE5.5、IE6仅支持CSS1中的:hov
css a:hover下的span样式无效的解决方法
09-25
在这个特定的问题中，用户尝试在`<a>`标签内的`<span>`元素上应用`:hover`效果，但发现在IE6浏览器中不起作用。这个问题是由于早期版本的IE浏览器对CSS选择器支持的限制所导致的。 在初始的CSS代码中： ```css a:...
傲游极速模式下a:hover使用了宋体字则不能正常显示下划线
09-25
本文提到的问题集中在傲游浏览器的极速模式下，当`<a>`标签的`:hover`伪类应用了宋体字时，下划线无法正常显示。这个问题可能让开发者感到困惑，因为同样的代码在其他主流浏览器上运行良好。 首先，开发者在排查...
使IE6支持:hover效果使用li:hover或div:hover
09-25
将`csshover.htc`文件放置在网站的根目录，然后在CSS样式表中通过`behavior`属性引用该文件，即可使IE6识别并应用`:hover`效果。 具体实现步骤如下： 1. 首先，你需要下载`csshover.htc`文件。这个文件可以从网上...
a:hover span 隐藏/显示 问题
weixin_30679823的博客
06-29 257
:hover是我们在CSS设计中最常运用的伪类之一，许多绚丽效果的实现离不开伪类:hover，比如我们常见的纯CSS菜单、相册效果等等。 或许用了这么久的伪类:hover，还有部分朋友还不完全了解hover的规则： 引用:在CSS1中此伪类仅可用于a对象。且对于无href属性（特性）的a对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。 但目前IE5.5、IE6仅支持CSS1中的...
Google Chrome浏览器无法显示hover样式的解决方法
09-25
鼠标移上去导航背景变别的颜色，可是在Google Chrome浏览器中，把鼠标移到导航上不显示效果，背景无变化，下面是比较不错的解决方法
html a hover css,CSS中的a:hover表示什么
weixin_29310631的博客
06-24 5504
a：hover表示当鼠标选定在a标签上时a标签的样式变化。这是css中伪类的使用格式。伪类(Pseudo classes)是选择符的螺栓，用来指定一个或者与其相关的选择符的状态。它们的形式是selector:pseudo class { property: value; }，简单地用一个半角英文冒号(:)来隔开选择符和伪类。CSS很多的建议并没有得到浏览器的支持，但有四个可以安全用在超链接上的伪类...
IE下a标签中内容为空，在页面中无法显示其hover样式的解决方法
weixin_30616969的博客
08-16 121
最近做一个活动页面，页面中有一个按钮，如果抠图处理单独作为按钮图片的话，效果不是很好，于是想将整个图作为背景，然后在设置一个<a>标签作为按钮通过绝对定位使其与图片中的按钮重合，从而达到点击按钮的效果。一切在chrome和FF下都很顺利，又在IE下栽了跟头。因为在IE下不会出现<a>标签的hover样式，也无法点击。若果将<a>设置背景色，则IE下就可...
hover出不来是什么原因css,关于css的:hover失效问题
weixin_39867509的博客
08-03 1655
参考：********************************我是分割线*******************************************************************************************1、网上百度的原因一般有如下几种种，第一种是：选择器、：、hover之间有空格，或者冒号是中文符号；第二种是：没有注意active，vis...
html中hover无法触发,CSS hover失效的原因总结
weixin_33585909的博客
06-15 2905
8种机械键盘轴体对比本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？最近碰到了一个设置h标签的hover失效问题，找了些资料，趁此机会做个总结在 CSS 定义中，它们同时存在的时候,a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。,即visitied / link> hover > active ****在 CSS 定义中，它们同时存在的时...
CSS基础
黎小小的博客
11-05 530
本文内容是根据毕晓东老师的视频教程总结而得。 1.概述&amp;和html结合的方式一二 CSS介绍：解决页面显示效果问题。层叠样式表，用来定义网页的现实效果，可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的现实效果功能。简单地说，css将网页内容和显示样式进行分离，提高了显示功能。 那么CSS和HTML是如何在网页代码中结合的呢？ 通过四种方式： st...
关于CSS中hover失效的几个原因
热门推荐
Xiaosang's blog
02-26 4万+
在设置CSS的hover时，有时会发现hover不起作用，总结一下原因： 提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。 1.在设置:hover前加空格： 比如 .one { margin: 0 auto; wid
css的hover属性:为什么鼠标放在a上不能触发b
luobin的博客
01-29 3596
之前为了做二级菜单尝试使用了一下这个hover 的属性,发现怎么也不能生效,经过搜索才找到答案
A链接点击后a:hover的CSS样式不起作用的问题原因与解决办法
蕃薯耀
07-24 1409
A链接访问后a:hover的CSS样式不起作用的问题原因与解决办法&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&g
:hover css
最新发布
08-24
":hover"是CSS中使用最广泛的伪类之一，用于创建鼠标悬停效果。它可以应用于标签或div等元素，通过简单的CSS选择器来选择具体的元素并定义其悬停时的样式。 然而，需要注意的是，这种效果仅适用于CSS2及以上版本的浏览器，对于仅支持CSS1的浏览器可能无法显示。在IE6中，只兼容a:hover伪类，而其他元素的:hover效果可能无法实现。 要为一个元素添加:hover样式，可以使用类选择器来选中该元素，并在CSS样式表中定义:hover状态下的样式。比如，如果要为一个class为"aa"的div元素定义:hover样式，可以使用如下的CSS代码： .aa:hover { background-color: yellow; } 需要注意的是，在CSS定义中，:hover伪类必须位于:link和:visited之后，以确保样式的生效。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [使IE6支持:hover效果使用li:hover或div:hover](https://download.csdn.net/download/weixin_38591011/13676124)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [关于CSS :hover选择器的用法（控制子元素样式、控制同级元素样式）](https://blog.csdn.net/start_sea/article/details/119415255)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值