Question

我有几个div，每个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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我今天早上特别受到启发，并提出了解决方案。答案不是定义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%; }

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

2 个答案: