15赞

在jquery中悬停时显示图像上的链接

作者：mobiledu2402852413 | 2023-09-09 16:21

如何解决《在jquery中悬停时显示图像上的链接》经验，为你挑选了1个好方法。

我正在使用Bootstrap 3并jQuery 1.9.1创建一个网站,其中个人资料图片显示在

标签中.当我将鼠标悬停在图像上时,我想显示"更新图像"的链接.到目前为止,我已经设法在悬停时淡出图像但是我无法在悬停在图像上时显示链接或文本.这是我的代码,

JQUERY

$(function () {
    $(".img-profile").hover(
        function () {
            $(this).fadeTo(200, 0.45);
        },
        function () {
            $(this).fadeTo(200, 1);
        });
});

CSS

.img-profile {
    margin-top: 10px;
    width: 200px;
    height: 250px;
}

HTML

我搜索了其他来源,但没有一个有效,因为它会破坏我自己的CSS样式.如何在悬停时在图像中间显示链接？急需这个帮助!谢谢.

1> Deepak Yadav..：

希望,如果你想在没有Jquery的情况下做到这一点 - 即使你想用jquery来管理它,它也可以做到......不是一个大问题

.img-profile {
  margin-top: 10px;
  width: 200px;
  /* if image is bigger it will adjust according to parent width */
  height: 250px;
  display: inline-block;
}
.img-wrap {
  display: inline-block;
  position: relative;
}
.img-wrap:hover .img-profile {
  opacity: 0.5;
}
.img-wrap .hover-div {
  display: none;
  position: absolute;
  text-align: center;
  top: 50%;
  left: 0;
  right: 0;
  margin-top: -10px;
  z-index: 10;
  /* width of image container */
}
.img-wrap:hover .hover-div {
  display: inline-block;
}
























    

    
        
            
            
                
                    
                
            

            
                mobiledu2402852413            

            
                这个屌丝很懒，什么也没留下！            
            
            

                                
                    
                    关注作者
                            

        
    


    
        Tags | 热门标签
        
            
                                
                    actionscrip
                
                                
                    bash
                
                                
                    c#
                
                                
                    c++
                
                                
                    c语言
                
                                
                    erlang
                
                                
                    flutter
                
                                
                    go
                
                                
                    golang
                
                                
                    java
                
                                
                    javascript
                
                                
                    lua
                
                                
                    node.js
                
                                
                    perl
                
                                
                    php
                
                                
                    python
                
                                
                    scala
                
                                
                    typescript
                
                                
            
        
    


    
        RankList | 热门文章
        
            
                                
                    1使用组合减速器时,访问该州的其他部分
                
                                
                    2使用Golang进行XML编组-具有相同节点名称的多个节点
                
                                
                    3为什么unique_ptr operator-> not const-overloaded？
                
                                
                    4如何在回调接受多个参数时实现函数的promisify
                
                                
                    5x86_64  - 操作码映射.可能的错误？
                
                                
                    6单击取消按钮后,Textfield将隐藏
                
                                
                    7动态地将文本继续分成单独的<p>段落？
                
                                
                    8为什么LabVIEW允许在Numeric控件中使用字符？
                
                                
                    9如何使ansible连接到linux跳转服务器后面的windows主机
                
                                
                    10如何使用jQuery重置HTML5表？
                
                                
                    11为什么function(){}不起作用,但是(function(){})呢？(Chrome DevTools/Node)
                
                                
                    12将unsigned char数组转换为IP字符串的最快方法是什么？
                
                                
                    13不推荐使用'lock':首先在iOS 8.0中弃用 - 使用-performBlockAndWait:代替 -  iOS coredata警告
                
                                
                    14array_splice()在循环中无法正常工作
                
                                
                    15不一致的可访问性字段类型比字段更难访问
                
                                
                    16AngularJS ng-options/Typeahead表达式语法
                
                                
                    17返回IList <T>比返回T []或List <T>更糟糕吗？
                
                                
                    18元组数组的JSON模式
                
                                
                    19如何在ansible的主机文件中指定用户名
                
                                
                    20基于内部列表的元素的比较从列表列表中删除重复项







    DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6 

    Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved  devBox.cn 开发工具箱  版权所有