关于javascript:悬停父div更改0宽度子div以匹配包含的图像宽度

hovering parent div changes 0-width child div to match contained image width

我有几个div,每个div包含一个图标和一个工具提示类型的图像:

  • 容器是方形的height=135pxwidth=135px
  • 图标div主要是正方形的,具有height=135pxwidth=auto,它是图像height=100%width=auto以保持宽高比。宽度小于高度。
  • 工具提示为矩形,height=135pxwidth=auto,其图像为height=100%width=auto。宽度通常至少是高度的两倍。

图像与Bootstrap 4类对齐。

这些容器div共同构成了一种服务镶嵌。当每个图标图像都悬停时,相应的类似工具提示的图像会从图标的中心出现,并带有"打开书本"动画。我的意思是,子div具有width:0;直到父级悬停,然后将其设置为width:[width of contained image];动画。标记如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
    <!-- container div -->        
   

        <!-- div containing the icon -->
                               
           
                <img height="100%" src="the icon url">
           
       

        <!-- div containing the tooltip -->
       
            <img height="100%" src="the tooltip url">

出于布局测试的目的(以下CSS代码),我有一个错误的CSS动画正在执行我想要的特定"工具提示"图像所需的动画,但是当我完成测试并开始添加其余图像时,一切都破裂了。我设置了特定的宽度,并利用left属性实现了我想要的目的,但是现在我正在完成开发,并希望允许用户更改图像而不破坏布局。每个工具提示都是具有相同高度但宽度不同的不同图像。这是我现在拥有的CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
    .dLarge { height: 135px; }
    /* for different viewports I also have different heights for the icons and tooltips, but for the sake of clarity, let's focus on"dLarge" - 135px height */  

    .int_Sicon { position:relative; }
    .int_Sicon .int_Stooltip {
        visibility: hidden;
        position: absolute;
        z-index: 1;
        overflow: hidden;
        pointer-events: none;

        top:0;
        left: 0;
        margin:0;

        -webkit-transition: width 0.3s ease-out, left 0.3s ease-out;
        -moz-transition: width 0.3s ease-out, left 0.3s ease-out;
        -o-transition: width 0.3s ease-out, left 0.3s ease-out;
        transition: width 0.3s ease-out, left 0.3s ease-out;
    }
    .int_Sicon .int_Stooltip::after {
        content:"";
        position: absolute;
    }
    .int_Sicon:hover .int_Stooltip {
        visibility: visible;
        left: -100%;
    }

所以我开始弄乱JavaScript,这是我最终失败的地方:

1
2
3
4
    var getWidth = $('.int_Stooltip>img').outerWidth();

    $('.int_Stooltip').css({'width' : 0});
    $('.int_Sicon').hover( $('.int_Sicon>.int_Stooltip').css({'width' : getWidth}); );

我到处都在寻找解决方案,但是没有什么适合我想要实现的目标。
我基于以下StackOverflow问题:使用CSS

从中间扩展div,而不是仅从顶部和左侧扩展div

本质上,我想在此https://codepen.io/wintr/pen/wWoRVW的内容上做点什么,除了覆盖按钮的图像而不是背景动画。

我正在使用Bootstrap 4.0 beta 2和Jquery 3.2.1。

我是自学成才,并渴望学习更多。我想念什么?或者至少,我应该看哪里?


如果您尝试在代码笔示例中达到效果。默认情况下,您需要使工具提示居中,宽度为0。可以通过将元素的top,right,bottom和left属性设置为0,然后将其边距设置为auto来使绝对定位的元素居中。然后,当您将鼠标悬停时,宽度应更改为100%。查看下面的代码。我添加了一些颜色和文本只是为了使其可视化,因为没有实际的图像。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.int_Slogo {position:relative; display:inline-block;}
.int_Slogo .int_Stooltip {
    width: 0;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    top:0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    -webkit-transition: width 0.3s ease-out, left 0.3s ease-out;
    -moz-transition: width 0.3s ease-out, left 0.3s ease-out;
    -o-transition: width 0.3s ease-out, left 0.3s ease-out;
    transition: width 0.3s ease-out, left 0.3s ease-out;
}
.int_Slogo:hover .int_Stooltip {
    width: 100%;
}
1
2
3
4
5
            <img src="http://lorempixel.com/400/200/sports/1/Dummy-Text/">
       
   
   
        <img src="http://lorempixel.com/400/200/sports/Dummy-Text/">


今天早上,我特别受启发,醒悟并提出了解决方案。答案不是在定义div的宽度,而是为图像本身指定css。这就是我想出的。

标记:

1
2
3
4
5
            <img class="dLargeImg m-auto d-block" src="imgsrc">
       
   
   
        <img class="dLargeImgs m-auto d-block" src="imgsrc">

样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.dLarge {
    height: 135px;
    width: 135px;
}

.dLargeImgs { height:135px; }

.int_Sicon {
    position:relative;
    display: inline-block;
}

.int_Sicon .int_Stooltip {
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left: 0;

    margin:0;
    z-index: 1;

    pointer-events: none;
    overflow: hidden;

    -webkit-transition: left 0.3s ease-in-out, right 0.3s ease-in-out;
    -moz-transition: left 0.3s ease-in-out, right 0.3s ease-in-out;
    -o-transition: left 0.3s ease-in-out, right 0.3s ease-in-out;
    transition: left 0.3s ease-in-out, right 0.3s ease-in-out;
}

.int_Sicon:hover .int_Stooltip {
    left:-50%;
    right:-50%;
}

.int_Sicon .int_Stooltip img {
    width:0;

    -webkit-transition: width 0.3s ease-in-out;
    -moz-transition: width 0.3s ease-in-out;
    -o-transition: width 0.3s ease-in-out;
    transition: width 0.3s ease-in-out}

.int_Sicon:hover .int_Stooltip img { width:100%; }