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

Question

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

• 容器是方形的，height=135px 和width=135px。
• 图标 div 大部分是方形的，有height=135px，width=auto，它的图像height=100% 和width=auto保持纵横比。宽度小于高度。
• 工具提示是矩形的，height=135px、width=auto、图像height=100% 和width=auto。宽度通常至少是高度的两倍。

图像与 Bootstrap 4 类对齐。

容器 div 共同构成了一种服务马赛克。当每个图标图像悬停时，相应的类似工具提示的图像会从图标的中心出现一个“打开书本”动画。我的意思是，子 div 有 width:0; 直到父级悬停，然后动画到 width:[width of contained image];。标记如下：

    <!-- container div -->        
    <div class="int_Sicon mx-2 my-2">

        <!-- div containing the icon -->
        <a href="corresponding service page">                       
            <div class="d-block dLarge">
                <img height="100%" src="the icon url">
            </div>
        </a>

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

    </div>

我有一个错误的 css 动画，它为特定的“工具提示”图像做我想要的，用于布局测试目的（以下 css 代码），但当我完成测试并开始添加其余图像时，一切都崩溃了。我设置了特定的宽度，并利用left 属性来实现我的意图，但现在我正在完成开发并希望允许用户在不破坏布局的情况下更改图像。每个工具提示都是具有相同高度但宽度不同的不同图像。这是我现在拥有的 CSS：

    .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，这就是我最终失败的地方：

    var getWidth = $('.int_Stooltip>img').outerWidth();

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

我到处寻找解决方案，但没有找到适合我想要完成的任务。 我基于这个 StackOverflow 问题：Expand div from the middle instead of just top and left using CSS

基本上，我想在https://codepen.io/wintr/pen/wWoRVW 的行上做点什么，除了用图像覆盖按钮而不是背景动画。

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

我是自学成才，渴望了解更多。我错过了什么？或者至少，我应该去哪里看？

Answer 1

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

标记：

<div class="dLarge int_Sicon mx-2 my-2">
    <a href="corresponding service page">                       
        <div class="d-block">
            <img class="dLargeImg m-auto d-block" src="imgsrc">
        </div>
    </a>
    <div class="int_Stooltip">
        <img class="dLargeImgs m-auto d-block" src="imgsrc">
    </div>
</div>

样式：

.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%; }

Answer 2

如果您试图在代码笔示例中实现效果。您将希望工具提示默认居中，宽度为 0。您可以通过将绝对定位元素的顶部、右侧、底部和左侧属性设置为 0，然后将其边距设置为自动来居中。然后，当您悬停时，宽度应更改为 100%。查看下面的代码。我添加了一些颜色和文字只是为了帮助将其可视化，因为没有实际的图像。

.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%;
}

<div class="int_Slogo mx-2 my-2">
    <a href="Services">                     
        <div class="d-block dLarge">
            <img src="http://lorempixel.com/400/200/sports/1/Dummy-Text/">
        </div>
    </a>
    <div class="int_Stooltip dLarge">
        <img src="http://lorempixel.com/400/200/sports/Dummy-Text/">
    </div>
</div>