通过使用css字体阴影效果解决hover图片时显示文字看不清的问题 -凯发k8官方网

1.前言

最近需要加入一个小功能，在鼠标越过图片时，提示其大小和分辨率，而不想用增加属性title来提醒，不够好看。然而发现如果文字是一种颜色，然后总有概率碰到那张图上浮一层的文字会看不到，所以加入文字字体阴影效果来解决此问题。

2.例子说明

未加入字体阴影之前的效果

   

加入字体阴影的效果

如果没加入字体阴影的效果，左图会看不清哪些文字的，而右图没有多大区别。

3.相关代码

　 text-shadow:0px 0px 10px #000;
第一个参数0px:代表阴影距离左5px显示 第二个参数0px:代表阴影距离上5px显示 第三个参数10px:代表阴影大小的范围 第四个参数#000:代表圆阴影颜色 position:relative;bottom:33px
加入此属性，文字的span标签就可以让其漂在图片上面
$('.eachimg').hover(function() {var tip = "image size:" $(this).find('img').attr('data-imgsize') " resolution:" $(this).find('img').attr('data-imgresolution');$(this).find('#hovertip').html(tip);$(this).find('#hovertip').css("display","block");//$(this).find('#hovertip').fadein();//$(this).find('#hovertip').show(100);},function(){$(this).find('#hovertip').css("display","none");//$(this).find('#hovertip').fadeout();//$(this).find('#hovertip').hide(100);}); 说明一下，上面显示隐藏，有三种方案，fadein和fadeout 从底向上淡入淡出，show和hide是从左上角慢慢地淡入淡出，后两种方案，目前这个代码会出现一个问题，当你多次快速经过某张图片时，由于有延时性，所以淡入淡出会出现多次。 4.总结
这个小功能主要是用到了css相对位置和字体阴影的特性及jquery的hover的方法。

转载于:https://www.cnblogs.com/fanbi/p/7044587.html

总结

以上是凯发k8官方网为你收集整理的通过使用css字体阴影效果解决hover图片时显示文字看不清的问题的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。