视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
触发a标签hover事件,如何在元素底部显示蓝色底块_html/css_WEB-ITnose
2020-11-27 16:31:20 责编:小采
文档

a a:hover html 鼠标悬浮

要显示的效果图如下:[align=center]
[/align]

代码如下:





  • 联系我们

  • 关于创恒

  • 产品代理





  • 问题是:当鼠标移到标题时,显示蓝色背景在元素顶部,而非在其底部?
    运行的效果图如下:


    回复讨论(解决方案)

    你可以用li:hover border-bottom:3px solid blue;

    background-position:bottom; //是针对背景图片的位置,不是背景颜色
    height: 1px;//这里的高度为什么是1px?有什么目的?
    width:45px;

    可以采用1楼的做法,设置底部边框

    还有给你个动画效果的网址,Jquery直接接口调用
    不需多写代码
    http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/


    里边有你的效果

    background-position是设置背景图像的起始位置,你也没有背景图像啊,另外你还设置了background-repeat,也是没用的。还有,对a设置height和width也是无效的,除非它的display设置成block。
    你可以让li的border-bottom显示出来啊,用jquery很简单的:
    $("#ul li").hover(function(){
    $(this).css("border-bottom","1px solid red");
    },function(){
    $(this).css("border-bottom","none");
    });

    still_melody,zhoufeng0401,dongjunhui2010
    谢谢大家!

    still_melody,zhoufeng0401,dongjunhui2010
    谢谢大家!
    警告楼主,除了a元素之外,一些浏览器可能不支持其他元素的hover

    下载本文
    显示全文
    专题