Question

我正在使用Jquery和css在图像上叠加文本。叠加文字在图像上显示良好。但我正在尝试更改文本字体和大小。我试图改变css中的字体系列和一切。但这并没有影响任何事情。请看看我做了什么代码。

在css文件中：

    #container {
  width: 100px;
  text-align: center;
  margin: auto;
}

.back
{
  position:absolute;
  top:0;left:0;
}
.wrap
{
  width:100px;
  height:100px;
  position:relative;
  margin:auto;
  overflow:hidden;
}

.comment
{
  position:absolute;
  width:100px;
  top:100px;
  left:0px;
  letter-spacing: -1px;
  color: white; 
  font-family:"Bookman Old Style", "Book Antiqua", Garamond;  
  font-size:100%;
  background: #4A4D4A;
  padding: 10px;
  filter:alpha(opacity=60);
  -moz-opacity:0.6;
  -khtml-opacity: 0.6;
  opacity: 0.6;
  line-height: 90%
}

JQuery的：

<script type="text/javascript">

    $(function () {
        $('.wrap').hover(function () {
            $(this).children('.comment').stop().css("top", "0px");
        }
            , function () {
                $(this).children('.comment').stop().animate({ "top": '400px' }, 600);
            });
    });

</script>

HTML：

<div id="container">
                <div class="wrap">
                    <SPSWC:ProfilePropertyImage PropertyName="PictureUrl" ResizeToFit="100" RenderWrapTable="False"
                        ShowPlaceholder="true" ID="PictureUrlImage" runat="server" class="back" />
                    <span class="comment"><a href="http://www.google.com" id="A1"  >Edit Picture </a>
                    </span>
                </div>
            </div>

现在图像显示如下。

enter image description here

但我想要像FaceBook

这样的展示图片

enter image description here

大师请指教我

JSfiddle：jsfiddle.net/ItsMeSri/7mfj7/1

Answer 1

我不知道结果HTML是什么。因为您似乎正在使用在服务器端评估的标记，例如SPSWC:ProfilePropertyImage。你甚至不需要Javascript来做这些事情。简单的CSS可以工作。你检查Fiddle#d42SU/1/那就是你想要的完全相同的东西。假设这是HTML。

<div id="container">
    <div class="wrap">
       <img src ="http://www.w3.org/html/logo/downloads/HTML5_Logo_256.png">
       <span class="comment">
          <a href="http://www.google.com" id="A1" >Edit Picture </a>
       </span>
   </div>
</div>

使用CSS

#container{
  width: 256px;
}
#container .wrap{
  width: 256px;
  height: 256px;
  overflow: hidden;
  position: relative;
}
#container .wrap img{
  position: relative;
}
#container .wrap span.comment{
  background-color: yellow;
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: #000000;
  padding: 2px;
  display: none;
}
#container .wrap:hover span.comment{
  display: block;
}
#container .wrap:hover span.comment a{
  text-decoration: none;
  color: #ffffff;
}

Answer 2

CSS3可以充分利用这一点。它无论如何都可以做悬停效果

<强>更新

如果您在.wrap上使用此功能，请确保使用position:relative，因为:after可以正确定位。

尝试

.element:hover:after{
    content: "<a class='edit_picture' href='' title=''>Edit Picture</a>";
    position:absolute;
    width:80px;
    margin-right:-80px;
    left:100%;
    top:0%;
}

你确实需要一点JS

$(function () {
    $('.edit_picture').click(function () {
        //do magic...
    });
});

使用JQuery和CSS在图像上叠加文本？

2 个答案: