li：hover的小知识

最新推荐文章于 2022-07-22 17:15:00 发布
最新推荐文章于 2022-07-22 17:15:00 发布
阅读量1.8k 收藏
点赞数
分类专栏： 代码debug 文章标签： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35620313/article/details/53510386
版权

<style>

*{margin:0;padding:0;}

.user_banner_logo_wrap{ width:1920px;height:149px; overflow:hidden; background:url(http://img11.360buyimg.com/cms/jfs/t3415/2/2035385460/17797/2fdc18ba/583fdfc8N282cdb79.jpg)no-repeat;}

.user_banner_logo_wrap ul{list-style:none;}

.user_logo_main{width:990px;height:149px;margin:0auto;position:relative;}

 

.user_logo_bg{ width:990px;height:110px;position:absolute;top:0;left:0;}

.user_stylenone{width:113px;height:110px;position:absolute;top:0;left:0;}

 

.user_h_after{width:875px;height:110px;position:absolute;top:0;left:113px;}

.user_h_after li{

position:relative;

top:4px;

width: 106px;

height: 110px;

display: inline-block;

margin-right: -1px;

text-align:center;

line-height:100px;

overflow:hidden;

}

.user_h_afterli:hover{background:url(http://img30.360buyimg.com/cms/jfs/t3706/127/2072968915/1332/72e000a7/583ff366Nb0c5b405.jpg)no-repeat;

filter:alpha(opacity=90); 

     -moz-opacity:0.9; 

     -khtml-opacity: 0.9; 

     opacity: 0.9;  }

.user_getA{display:none;text-decoration:none;color:#fff;}

</style>

<divclass="user_banner_logo_wrap">

  <div class="user_logo_main">

   <div class="user_logo_bg">

   <imgsrc="http://img10.360buyimg.com/cms/jfs/t3538/60/2051727122/51408/623ccdf6/583fefdbN8a2bf565.jpg"width="990" height="110" alt="" />

   </div>

   <div class="user_stylenone">

   </div>

   <ul class="user_h_after">

   <li><a href="#" target="_blank"class="user_getA">品牌旗舰</a></li>

   <li><a href="#" target="_blank"class="user_getA">品牌旗舰</a></li>

   <li><a href="#" target="_blank"class="user_getA">品牌旗舰</a></li>

   <li><a href="#" target="_blank"class="user_getA">品牌旗舰</a></li>

   <li><a href="#" target="_blank"class="user_getA">品牌旗舰</a></li>

   <li><a href="#" target="_blank" class="user_getA">品牌旗舰</a></li>

   <li><a href="#" target="_blank"class="user_getA">品牌旗舰</a></li>

   <li><a href="#" target="_blank"class="user_getA">品牌旗舰</a></li>  

   </ul>

   </div>

</div>

<script>

$(document).ready(function() {

   $('.user_h_after li').hover(function(){

                  

                   $(this).find('a').show();

                  

                   },function(){

                            $(this).find('a').hide();

                           

                            });

});

</script>

相关资料：

说到xx:hover有人用的解决办法可能第一反应就是去网上找相关的JS来代替hover，其实有个超级简单的方法，就是在LI标记里加一个A标记，然后定义这个A标记为display:block即可，然后就可以把这个A标记宽高设置和LI一样，这样就很兼容IE6了，演示代码如下：
<ul>
<li><a href="#" style="display:block">栏目一</a></li>
<li><a href="#" style="display:block">栏目二</a></li>
<li><a href="#" style="display:block">栏目三</a></li>
</ul>
当然了，还有其他别的方法，连代码都不用写，只需引用一个文件就行：csshover.htc（下载地址：http://www.xs4all.nl/~peterned/htc/csshover3.htc ，如果失效，自行百度）
下载好后，只需在代码的<head></head>中间添加下面这段代码，然后就放心大胆的去使用hover吧（也支持focus）：
<!--[if lte IE 6]>
       <style type="text/css">
       body { behavior:url("csshover.htc"); }
       </style>
<![endif]-->

总结就是三种方法：；

1、导插件

2、li设置高度同时保证撑开

3、li内部元素撑开li



以上为测试，如有错误，请各位指正

初漆微芽
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
li:hover的解决方案
05-08
因为IE6里只有a才有houver属性，为了解决这个问题找了半天，最后找到一个最合适的,其它也不是li:hover.只是用事件改变class对IE6.0而言
给li设定hover效果
热门推荐
luoxia0805的专栏
05-23 2万+
想做导航时鼠标滑过导航的栏目时，导航栏目的背景发生
html li hover,<li>有 li :hover 这个属性吗?
weixin_32475641的博客
06-27 671
list*{padding:0;margin:0;}#list{width:600px;height:40px;background: #eee;margin:10px auto;}ul{list-style-type: none;}ul li{float: left;}ul a{display: block;width:90px;line-height:40px;background: #ee...
li标签中hover的使用及li标签的样式
qq_35315439的博客
06-02 3517
border-top-left-radius: 10px; /* 左上角的圆角*/ #nav li:hover{ border-radius:8px; background-color:#e7efff; }
使IE6支持:hover效果使用li:hover或div:hover
09-25
为了解决这个问题，微软提供了一个名为`csshover.htc`的行为（Behavior）文件，这是一个ActiveX组件，允许IE6浏览器模拟对`:hover`伪类的支持，扩展到`<li>`、`<div>`等其他元素。将`csshover.htc`文件放置在网站的...
jquery鼠标hover显示右侧的大图片
11-16
$('.thumbnail-list li').hover( function() { var bigSrc = $(this).find('img').attr('data-big-src'); $('#large-image-container').html('<img src="' + bigSrc + '"/>').show(); }, function() { $('#...
jQuery实现删除li节点的方法
11-27
$("li.hover").remove(); }); ``` 当用户点击删除按钮时，所有具有类名"hover"的`<li>`元素将被`.remove()`方法移除。`.remove()`是jQuery的一个功能，用于从DOM中彻底删除匹配的元素，同时也会解绑与之关联的所有...
jquery hover抽屉式导航图片展开收缩代码
10-27
在网页设计中，导航菜单是用户与网站交互的重要部分，而抽屉式导航因其...通过以上知识点的实践，我们可以创建一个功能完备且具有交互性的jQuery hover抽屉式导航，不仅增强了网站的视觉效果，还提升了用户的操作体验。
S1415I-LI51D:S1415I-LI51D
07-02
【标题】"S1415I-LI51D: S1415I-LI51D" 暗示着这是一个特定项目或产品的标识符，可能是一个软件版本号或者是某种设备型号。不过，由于提供的信息过于简洁，无法直接得出与IT知识相关的具体细节。但从"CSS"这一标签，...
li:hover ul,li.over ul{ display: block;}这句被ie6.0解释不了
weixin_33997389的博客
11-30 233
CSS: #nav li:hover ul, #nav li.over ul{display:block}   解决方法： 在&lt;head&gt;&lt;/head&gt;中加入这段JS即可&lt;script type="text/javascript"&gt;&lt;!--function menuFix() {var sfEls = document.getElementById...
li:hover{ color: #ffffff; }
Tell_me_why1228的专栏
07-31 498
今晚答辩时好尴尬，孙方雨学长问我一个知识点，我都不知道。 就是这个li:hover{color: #ffffff;}，这css样式设置的本意 是将li标签下的字体背景设置为白色。下次一定要注意。 千万不要让自己代码中出现了自己不知道的东西。
css:hover选择器
千鱼鱼的日常
08-24 526
:hover在鼠标移到链接上时添加的特殊样式。 提示: :hover 选择器器可用于所有元素，不仅是链接。 提示: :link 选择器设置了未访问过的页面链接样式, :visited 选择器设置访问过的页面链接的样式 :active选择器设置当你点击链接时的样式。 注意: 为了产生预期的效果，在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后！！ &lt;...
li：hover背景色
weixin_34357436的博客
07-28 162
2019独角兽企业重金招聘Python工程师标准>>> ...
当鼠标进入li标签，给标签中的img元素加缩放效果
EasyLiu
01-23 4214
最近在做h5开发的时候有一个要求：当鼠标进入li标签的时候，需要给li标签中的img元素加缩放效果！请注意，不是给li标签本身添加缩放效果！ 我们都知道直接给img加缩放效果是十分简单的，代码如下： /** 鼠标放上，图片变大 */ #nav_group li img:hover { transform-origin: center center; transform: sca
hover li标签，可以将内容显示在里标签当中
m0_72313625的博客
07-22 1175
hover li标签，可以将内容显示在里标签当中，而li就会跟着改动li标签的高度，当离开li标签的时候，就可以还原到原来的高度。
li:hover与a:hover的区别
kbx8916的博客
08-24 5063
ul.two { display:none; } li#one:hover { display:block } 链接              链接1-1        链接1-2     如果用a#a1:hover来控制列表的颜色， 那么当光标移动到ul.two时，就会失效，因为光标离开了a#a1,a#a1:hover
用文字描述说明下面代码包含的相关主要知识点: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <style type="text/css"> .box { width: 100px ; height: 100px; overflow: hidden; position: relative; margin:0 auto; } .box div.hide{ display: none;} .box a:hover div.hide {display: block;Z} .box .show:hover div.hide{display: block; } </style> <body bgcolor="#99CCFF"> <div class="box"> <div class="show"> <a href="#" >选项</a> <div class="hide" > <ol> <li ><a href="http://www.baidu.com">百度</a></li> <li ><a href="http://www.swun.edu.cn">民大</a></li><li ><a href="http://www.scu.edu.cn">川大</a></li></ol> </div> </div> </div> </body> </html>
最新发布
06-08
这段代码是一个HTML文档，主要用到以下几个知识点： 1. HTML标签和属性：代码中用到了doctype、html、head、meta、title、style、body、div、a、ol、li等HTML标签以及它们的属性，例如charset、class、href、display、width、height、overflow、position、margin等。 2. CSS样式：代码中使用了CSS样式定义了.box、.box div.hide、.box a:hover div.hide和.box .show:hover div.hide等选择器的样式，包括宽度、高度、溢出、定位、边距、展示方式、颜色等。 3. 嵌套和选择器：代码中嵌套使用了div、a和ol等标签，同时使用了选择器来定义不同元素的样式，例如.box a:hover div.hide表示当鼠标悬停在a标签上时，它下面的div.hide元素会显示出来。 4. HTML网页布局：代码中使用了div元素来实现网页布局，例如.box元素就是一个盒子，包含了.show和.hide两个子元素来实现显示和隐藏效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值