触发a标签hover事件,如何在元素底部显示蓝色底块_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-21 09:43:56
asal
1891 orang telah melayarinya

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

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!