css - 为什么位置变了？

Question

请查看this example .有两个元素，每当我将鼠标悬停在 first 元素上时，第一张图片 消失，第二张图片出现。同时，第一个项出现的右侧有一个对话框。我的问题是，当我将鼠标悬停在第一个元素上时，位置会发生变化。

我想这是因为我使用了opacity。我使用 opacity:0 -> opacity: 1 来显示 dialog。但是，如果我使用 display: none -> display: initial，错误就会消失。

感谢您的帮助。

const service = function () {
    const email = $('.container .first')[0];
    $(email).mouseover(function () {
        $(this).addClass('hover')
    })
    $(email).mouseout(function () {
        $(this).removeClass('hover')
    })
}
service();

img {
  margin: 0 auto;
}
.container {
    position: fixed;
    left: 300px;
    background: #fff;
    top: 50%;
    transform: translateY(-50%);
    color: #333;
    width: 50px;
    font-size: 10px;
    border: .7px solid #dcddde;
    border-radius: 3px;
}
.container .first {
    position: relative;
    width: 50px;
    text-align: center;
    margin: 6px 0;
    margin-top: 8px;
  
}
.container div span {
    width: 30px;
    display: inline-block;
    height: 36px;
    line-height: 16px;
    overflow: hidden;
}
.container .hover {
    color:#0079ff;
}
.container .first .dialog {
    border: .7px solid #dcddde;
    /* display: none;*/ /* change this*/
    opacity: 0;
    position: absolute;
    color: #333;
    font-size: 15px;
    top: -7px;
    right: 60px;
    width: 200px;
    height: 43px;
    border-radius: 2px;
    line-height: 43px;
    text-align: center;
    background-color: #fff;
}

.container .first-hover-img {
    display: none;
}

.container .hover .dialog {
    display: initial;
    transition: opacity .6s;
    opacity: 1;
}
.container .hover .first-img {
    display: none;
}
.container .hover .first-hover-img {
    display: initial;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="first">
        <img class="first-img" src="https://via.placeholder.com/30x30" alt="">
        <img class="first-hover-img" src="https://via.placeholder.com/30x30" alt="">
        <span>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, reiciendis.
        </span>
        <div class="dialog">
            Lorem ipsum dolor sit amet.
        </div>
    </div>
    <div class="second">
        <img class="service-img" src="https://via.placeholder.com/30x30" alt="">
        <span>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, reiciendis.
        </span>
    </div>
</div>

Answer 1

发生这种情况是因为您的父类有边框，所以请将相同的边框也添加到子 div 类，您的问题就解决了。

如果您担心工具提示位置，您必须更改您的 css 名称 .container .first .dialog，因为您在类里面给定了 40px 的高度，工具提示位置会发生变化。

建议的CSS

.container .first {
    border: 0.7px solid transparent;
    width: 50px;
    text-align: center;
}
.container .first .dialog {
   height:auto;
}