登录
当前位置： 首页 > 面试题库 >

Tumblr样式的UserHoverCard

张森
2023-03-14
问题内容：

大家好，我对Ajax悬停有一个问题。我试图使像tumblr的userHoverCard。但是当我将其与Ajax结合使用时，悬停动画无法正常工作。

这是不带Ajax CSS的 DEMO
。在此演示中，您可以看到.p-tooltip将鼠标悬停在图像上时将以动画效果打开。

但是，如果从我的测试页中单击此 DEMO
，则可以看到将鼠标悬停在图像上时.p-tooltip将无法打开带有动画效果的图像。

HTML

    <div class="p-tooltip"></div>
    <div class="summary" data-id="25">
      <a href=#" class="profile-ava"></a>
    </div>
    <div class="summary" data-id="20">
      <a href=#" class="profile-ava"></a>
    </div>
    <div class="summary" data-id="25">
      <a href=#" class="profile-ava"></a>
    </div>

这是我的ajax代码：

$(document).ready(function() {

        function showProfileTooltip(e, id){ 
           e.append($('.p-tooltip').css({ 
             'top':'20', 
             'left':'80' 
             }).show()); 
            //send id & get info from get_profile.php 
             $.ajax({
             url: 'get_profile.php?uid='+id,
             beforeSend: function(){

             $('.p-tooltip').html('Loading..');
             },
             success: function(html){ 
             $('.p-tooltip').html(html); 
             } 
           }); 
         }

        function hideProfileTooltip(){ 
        $('.p-tooltip').hide().fadeIn('fast'); 
         } 
        $('.summary a').hover(function(e){

          var id = $(this).attr('data-id'); 
          showProfileTooltip($(this), id);

          }, function(){ 
          setTimeout(function(){ 
          hideProfileTooltip(); 
          },2000); 
         });
    });

这是CSS代码：

.summary {
  margin: 50px auto 0;
  width: 50px;
  height: 50px;
  position: relative;
}
.profile-ava {
  width: 50px;
  height: 50px;
  background-image: url(http://gravatar.com/avatar/3913c4e14034c0a7f28db2c632290c21?s=80);
  border-radius: 3px;
  background-size: 50px 50px;
  display: block;
}

.summary a:hover:before {
  content: '';
  position: absolute;
  display: block;
  bottom: -10px;
  left: 0;
  height: 10px;
  width: 100%;
  z-index: 2;
}


.p-tooltip {
  position: absolute;
  margin-top: 10px;
  top: 100%;
  left: 50%;
  margin-left: -140px;
  width: 280px;
  max-height: 120px;
  border-radius: 5px;
  overflow: hidden;
  background-color: #F0F0F0;
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s ease;
}
.profile-header {
  height: 120px;
  background-image: url(https://pbs.twimg.com/profile_banners/571038694/1395748220/1500x500);
  background-size: auto 120px;
  background-position: 50%;
}
.profile-navigation {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
}
.profile-nick {
  color: #fff;
  margin: 0;
  padding: 0.4em 0;
  font-size: 0.8em;
  font-weight: bold;
}
.profile-action {
  float: right;
  background-color: #eee;
  padding: 0.4em;
  border-radius: 2px;
  color: inherit;
  text-decoration: none;
  font-size: 0.8em;
  font-weight: bold;
}


.p-tooltip .profile-ava {
  margin: -40px auto 0;
  width: 80px;
  height: 80px;
  background-size: 80px;
  border: 3px solid #F0F0F0;
  border-radius: 5px;
}

.profile-info {
  text-align: center;
  padding: 10px;
  opacity: 0;
}
.profile-title {font-size: 1.6em; margin: 0;}
.profile-description {
  margin: 0;
  font-size: 0.8em;
}

.profile-items {margin: 0px; padding: 10px;}
.profile-items:after {
  content: '';
  display: table;
  clear: both;
}
.profile-items li {  
  width: 80px;
  height: 80px;
  background-size: cover;
  background-position: center;
  float: left;
  display: block;
  border-radius: 3px;
}
.profile-items li:not(:first-child) {margin-left: 10px;}
.profile-items li:nth-child(1) {
  background-image: url(https://o.twimg.com/1/proxy.jpg?t=FQQVBBgwaHR0cHM6Ly9pLnl0aW1nLmNvbS92aS9CM3lna2lYRXVyWS9ocWRlZmF1bHQuanBnFAIWABIA&s=z1wybbbNHF0pyLthl3xhxVBNjbYlAEWEzPd-dUtrWOY);
}
.profile-items li:nth-child(2) {
  background-image: url(https://pbs.twimg.com/media/B7pkXfgCIAAwoY0.jpg:thumb);
}
.profile-items li:nth-child(3) {
  background-image: url(https://pbs.twimg.com/media/B7A3NHjIIAIt6eg.png:large);
}


.profile-header {
  -webkit-transform: translate(0, -50px);
  -moz-transform: translate(0, -50px);
  transform: translate(0, -50px);

  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;

  -webkit-transition-delay: 0.1s;
  -moz-transition-delay: 0.1s;
  transition-delay: 0.1s;

  opacity: 0;
}
.profile-info {
  -webkit-transform: translate(0, 50px);
  -moz-transform: translate(0, 50px);
  transform: translate(0, 50px);

  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;

  -webkit-transition-delay: 0.1s;
  -moz-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
.p-tooltip .profile-ava {
  -webkit-transform: scale(0.5) translate(0, -10px);
  -moz-transform: scale(0.5) translate(0, -10px);
  transform: scale(0.5) translate(0, -10px);

  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;

  -webkit-transition-delay: 0.1s;
  -moz-transition-delay: 0.1s;
  transition-delay: 0.1s;

  opacity: 0;
}
.profile-items li {
  -webkit-transform: translate(0, 50px);
  -moz-transform: translate(0, 50px);
  transform: translate(0, 50px);

  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;

  -webkit-transition-delay: 0.3s;
  -moz-transition-delay: 0.3s;
  transition-delay: 0.3s;
  opacity: 0;
}
.profile-items li:nth-child(2) {
  -webkit-transition-delay: 0.35s;
  -moz-transition-delay: 0.35s;
  transition-delay: 0.35s;
}
.profile-items li:nth-child(3) {
  -webkit-transition-delay: 0.4s;
  -moz-transition-delay: 0.4s;
  transition-delay: 0.4s;
}


.summary:hover .p-tooltip {
  visibility: visible;
  opacity: 1;
  max-height: 600px;
}
.summary:hover .profile-header,
.summary:hover .profile-info,
.summary:hover .p-tooltip .profile-ava,
.summary:hover .profile-items li {
  -webkit-transform: translate(0,0) scale(1);
  -moz-transform: translate(0,0) scale(1);
  transform: translate(0,0) scale(1);
  opacity: 1;
}

任何人都可以帮助我！


问题答案：

本质上，我已经创建了一个非常聪明的解决方法。这是一个覆盖图像的遮罩（不可见），直到加载html，然后将z-index降低后才进行悬浮css。鼠标悬停在容器上。

小提琴

.summary {
    margin: -50px auto 0;
    width: 50px;
    height: 50px;
    position: relative;
    z-index: 0;
}
.summary-mask {
    margin: 50px auto 0;
    width: 50px;
    height: 50px;
    position: relative;
    z-index: 1;
}
.loaded .summary-mask {
    z-index: -1;
}

HTML

<div class="the-container">
    <div class="summary-mask"></div>
    <div class="summary" data-id="100"> <a href="http://kraigo.tumblr.com/" class="profile-ava"></a>

        <div class="user-container"></div>
    </div>
</div>

JS

var response = '<div class="p-tooltip"> <div class="profile-header"></div> <div class="profile-navigation"> <a href="http://kraigo.tumblr.com/" class="profile-action">Follow</a> <p class="profile-nick"> <a href="http://kraigo.tumblr.com/">Page Name</a> </p> </div> <div class="profile-ava"></div> <div class="profile-info"> <h1 class="profile-title">Username</h1> <p class="profile-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy ..</p> </div> <ul class="profile-items"> <li></li> <li></li> <li></li> </ul> </div>';

$(document).ready(function () {

    function showProfileTooltip(e, id) {
        //send id & get info from get_profile.php 
        $.ajax({
            url: '/echo/html/',
            data: {
                html: response,
                delay: 0
            },
            method: 'post',
            success: function (returnHtml) {
                e.find('.user-container').html(returnHtml).promise().done(function () {
                    $('.the-container').addClass('loaded');
                });
            }
        });

    }

    function hideProfileTooltip() {
        $('.the-container').removeClass('loaded');
    }
    $('.the-container').hover(function (e) {

        var id = $(this).find('.summary').attr('data-id');
        showProfileTooltip($(this), id);

    }, function () {
        hideProfileTooltip();
    });
});


 类似资料：
  • 网格样式-覆盖Ag-grid的样式

    问题内容： 我有以下风格： 它来自主题的CSS样式文件。但是我想用这种风格覆盖它： 但这没有效果，我的组件使用第一种样式。如何覆盖第一个样式1？我尝试过，但它什么也没做。 我应该在css文件的开头定义自定义样式吗？ 更新： 我发现我可以使用函数gridOptions.getRowClass设置要使用的样式类。但是我想解决中心问题（对于我在应用程序中使用的所有角度网格）。任何的想法？ 问题答案： 你

  • 样式

    色彩 字体排版 图标 图像 书写

  • 式样

    检查器会显示出所选图层的一切式样选项。 从共享式样开始，接着是通用透明度、通用混合模式，再下面是填充、边框、阴影、模糊和镜像，我们会在本手册中分章节一一介绍，但是现在我们想先讨论几个通用的小技巧。 输入框 我们有一个很特别的输入框，鼠标悬停上去时你会看见上下两个小剪头出现在文本区域右边，你可以单击他们来增减图形的大小。如果你按住 shift 则会以 10 为单位变化。如果你按住 option 键，

  • 样式

    CSS Modules 在样式开发过程中，有两个问题比较突出： 全局污染 —— CSS 文件中的选择器是全局生效的，不同文件中的同名选择器，根据 build 后生成文件中的先后顺序，后面的样式会将前面的覆盖； 选择器复杂 —— 为了避免上面的问题，我们在编写样式的时候不得不小心翼翼，类名里会带上限制范围的标示，变得越来越长，多人开发时还很容易导致命名风格混乱，一个元素上使用的选择器个数也可能越来越

  • 样式

    每个组件都有自定义样式、已匹配样式、最终样式和已计算样式共四张样式表，其中已计算样式由最终样式计算而来，而最终样式则是已匹配样式与自定义样式合并而来的。 当组件的自定义样式、状态、结构以及样式库有改动的时候会触发样式计算，计算过程是先从样式库中查询与组件匹配的样式表，然后合并为一张样式表作为组件的已匹配样式，之后将已匹配样式与自定义样式合并成一张样式表作为最终样式，最后将最终样式转换为已计算样式，

  • 样式

    提示 本文档以 css 为示例，把后缀换成 .less 同样适用。 全局样式 Fes.js 中约定 src/global.css 为全局样式，如果存在此文件，会被自动引入到入口文件最前面。 比如用于覆盖样式， .layout-content { max-width: 1000px; } Vue单文件 <style> .layout-content { max-width: 1000px;

相关阅读

React Native中样式的默认样式单位是什么？你是怎样抽离样式模块的？Activity的AlertDialog样式按钮package.json中的“样式”字段Bootstrap的class样式小结

相关文章

Vue.js 样式绑定Vue3 样式绑定CSS鼠标样式JSF输出样式JasperReports 报表样式Style

相关问答

设置JavaFX Popover的样式AlertDialog样式-如何更改标题、消息等的样式（颜色）以编程方式设置TextInputLayout的样式nuxt3的加载样式的问题？缩小CSS样式

相关工具

流式RPC瀑布效果，不同的实现方式ini格式解析异步式 I/O设计模式Java版

相关文档

像 IDE 样使用 VIM怎样优化 Pentium 系列处理器的代码翻译漫谈 怎样翻译更地道JavaScript 模式像计算机科学家一样思考（C++版）
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.