在 img 内悬停时显示标题标签 [英] Show title tag on hover inside img
本文介绍了在 img 内悬停时显示标题标签的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我需要在 img 中显示 img 的 Title 标签.
像这个例子 http://jsfiddle.net/51csqs0b/
.image {位置:相对;宽度:200px;高度:200px;}.image img {宽度:100%;垂直对齐:顶部;}.image:after, .image:before {位置:绝对;不透明度:0;过渡:全0.5s;-webkit-transition:全部为 0.5s;}.图像:在{之后内容:'\A';宽度:100%;高度:100%;顶部:0;左:0;背景:RGBA(0,0,0,0.6);}.图像:之前{内容:属性(数据内容);宽度:100%;颜色:#fff;z-索引:1;底部:0;填充:4px 10px;文字对齐:居中;背景:红色;box-sizing:border-box;-moz-box-sizing:border-box;}.image:hover:after, .image:hover:before {不透明度:1;}
<img src="http://i.stack.imgur.com/Sjsbh.jpg" alt=""/><小时><div data-content="这里有不同的标题..." class="image"><img src="http://i.stack.imgur.com/Sjsbh.jpg" alt=""/>
但我不想在 img 之前使用 div.
<a href="#"><img class="" title="TITLE NEED SHOW ON HOVER" src=""/></a>
有可能出现吗?谢谢
解决方案
我能做的只有这些:
将 .image
类添加到 a
<a class="image" href="#"><img src="http://i.stack.imgur.com/Sjsbh.jpg" class="" title="标题需要在悬停时显示" src=""/></a>
在css中用title
替换data-content
:
.image:before {内容:属性(标题);宽度:100%;颜色:#fff;z-索引:1;底部:0;填充:4px 10px;文本对齐:居中;背景:红色;box-sizing:border-box;-moz-box-sizing:border-box;}
最后,添加这个 jQuery 代码:
$("a.image").each(function(){$(this).attr('title',$(this).find("img").attr('title'))});
自己运行此处:
Hi I need show a Title tag of img inside img.
Like this example http://jsfiddle.net/51csqs0b/
.image {
position:relative;
width:200px;
height:200px;
}
.image img {
width:100%;
vertical-align:top;
}
.image:after, .image:before {
position:absolute;
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:after {
content:'\A';
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
}
.image:before {
content: attr(data-content);
width:100%;
color:#fff;
z-index:1;
bottom:0;
padding:4px 10px;
text-align:center;
background:red;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
.image:hover:after, .image:hover:before {
opacity:1;
}
<div data-content="Here is a caption" class="image">
<img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>
<hr>
<div data-content="Different caption here..." class="image">
<img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>
But i don't want use a div before img.
<a href="#"><img class="" title="TITLE NEED SHOW ON HOVER" src=""/></a>
It's possible to show up? Thanks
解决方案
This is all thing I can do:
add .image
class to a
<a class="image" href="#"><img src="http://i.stack.imgur.com/Sjsbh.jpg" class="" title="TITLE NEED SHOW ON HOVER" src=""/></a>
replace data-content
with title
in css:
.image:before {
content: attr(title);
width:100%;
color:#fff;
z-index:1;
bottom:0;
padding:4px 10px;
text-align:center;
background:red;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
finally, add this jQuery code:
$("a.image").each(function(){$(this).attr('title',$(this).find("img").attr('title'))});
Run it yourself here:
这篇关于在 img 内悬停时显示标题标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文