1

我正在建立一个网站。在此，当我将鼠标悬停在图像上时，我希望在其上显示一些选项，例如点赞数、评论、摄影师等，以便从数据库中动态显示。请帮助我了解如何执行此操作。

4

7 回答 7

1

你可以用 JQuery 做这样的事情： 

$(".my-image-class").hover( function () {
  $('.options-menu').fadeIn('slow');
}

上面的代码假定您的图像具有 CSS 类my-image-class，而您的选项 div 具有 CSS 类options-menu。

于 2013-10-31T11:41:49.617 回答
1

HTML 和 php

<div id='imageinfo'>
    <img src'yourfile' id='myimage'>
    <div id='option'><?php //PHP dynamic code here for option ?></div>
</div>

JS

<script>
  $('#option').hide(); //hide the option div by default 
  $("#myimage").hover( 
  function () {                      //Mouse In Function 
      $('#option').fadeIn('slow');
  },function () {                   // Mouse Out Function  
      $('#option').fadeOut('slow');
  });
</script>

CSS

#imageinfo{
position:relative; 
}
 #option{
position:absolute;
z-index:9999;
bottom:0;
}

现在#option id内容过来图片，你可以把你的option，likes放在option div里

您可以使用类来处理同一页面上的多个图像

于 2013-10-31T11:51:01.680 回答
1

只需创建一个 div 将绝对定位应用到该 div。该位置将与您的图像的位置相同。然后更改z-index，div的z-index必须低于图像的z-index。之后编写一个脚本来增加 div 的 z-index 高于图像的 z-index。

例如：

<style type="text/css">
#div{
position:absolute;
top:10px;
left:10px;
z-index:-1000;
}
#image{
position:absolute;
top:10px;
left:10px;
z-index:100;
}
</style>
<script>
$(document).ready(function()
{
$("#image").hover(function()
{
$("#div").css("z-index","1000");
}
});
</script>

<body>
   <img src="http://cdn-careers.sstatic.net/careers/gethired/img/english-728c.png?v=7641486da3a3" id="image">
     <div id="div">
        <p>
Like:50;
comment:10
         <p>
     </div>
</body>
于 2013-10-31T11:51:36.747 回答
0

您所描述的通常称为tooltip.

一个好的起点是使用 jQuery UI 工具提示：http: //jqueryui.com/tooltip/

如果您在脑海中包含 jQuery 和 jQueryUI，您可以执行以下操作：

HTML

<p title="Simple tooltip content">Hover over me</p

Javascript

$(function() {
   $(document).tooltip();
});

http://jsfiddle.net/Vkj5y/

如果您希望在工具提示中包含 HTML，您仍然可以将其放在标题中并以这种方式调用工具提示插件：

$(document).tooltip({
    content: function () {
        return $(this).prop('title');
    }
});

http://jsfiddle.net/wnRN7/3/

更高级的库在这里：http: //qtip2.com/

于 2013-10-31T11:44:28.607 回答
0

首先，您必须像这样定义您想要的处理方式（点赞数、评论数、摄影师...）：

<script language="JavaScript" type="text/JavaScript"> 
function yourFunction(q){ 
//Treatment you want 
} 
</script>

在此之后，您所要做的就是将您的函数调用与“onmouseover”事件捕获器相关联。像这样 ：

<a href="#" id="home">
    <img id="yourImageId" src="pathOfYourImage"onmouseover="yourFunction(q);" />
</a>
于 2013-10-31T11:44:46.170 回答
0

工作演示

试试这个

$(function () {
    $('.client').on("mouseenter", function () {
        $(this).find(".client_slider").animate({
            "bottom": "-240px"
        }, "slow");
    }).on("mouseleave", function () {
        $(this).find(".client_slider").animate({
            "bottom": "-320px"
        }, "fast");
    });
});

希望这会有所帮助，谢谢

于 2013-10-31T11:55:46.020 回答
0

你可以这样做：

HTML：

<div>
    <img src="http://www.stepbystep.com/wp-content/uploads/2013/02/How-to-Apply-Blush-on-Oval-Face.jpg" class="myimg"/>
    <div class="options">
        <ul>
            <li>Like : 5 </li>
            <li>Comment: 6</li>
        </ul>
      </div>
 </div>

CSS：

.options{
    display:none;
    margin-top:-100px;
}

.myimg{

}

JS：

$(function(){
    $(".myimg").hover(function(){
        $(".options").show(1000);
    }, function(){
        $(".options").hide(1000);
    });
});

检查演示：http: //jsfiddle.net/alaminopu/eKhsC/

于 2013-10-31T11:57:03.830 回答