Почему меняется позиция?

Question

Пожалуйста, отметьте в этом примере . Есть два элемента, и всякий раз, когда я наводю курсор мыши на элемент first, первое изображение исчезает, а второе появляется.В то же время справа от элемента first отображается dialog.Мой вопрос заключается в том, что при наведении первого элемента позиция меняется.

Я полагаю, это потому, что я использую 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;
}

Answer 2

В вашем css просто удалите диалоговое окно transition: opacity 0.6s;display:initial; при наведении курсора.

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

img {
    width: 30px;
    height: 30px;
}

.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;
    font-family: '微软雅黑', "helvetica neue", "hiragino sans gb", arial, "microsoft yahei ui", "microsoft yahei", simsun, sans-serif;
}

.container .first {
    position: relative;
}

.container img {
    margin: 0 auto;
}

.container .first {
    width: 50px;
    text-align: center;
}

.container .first {
    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; */ 
    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 .dialog::before {
    content: '';
    position: absolute;
    right: -8.7px;
    top: 50%;
    transform: translateY(-50%);
    height: 0px;
    width: 0px;
    border-top: 8px solid transparent;
    border-left: 8px solid #dcddde;
    border-bottom: 8px solid transparent;
}

.container .first .dialog::after {
    content: '';
    position: absolute;
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
    height: 0px;
    width: 0px;
    border-top: 8px solid transparent;
    border-left: 8px solid #fff;
    border-bottom: 8px solid transparent;
}

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

.container .hover .dialog {
    opacity: 1;
}

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

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

.container .img {
    width: 50px;
    height: 30px;
    overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="first">
        <div class="img">
            <img class="first-img" src="https://via.placeholder.com/40x40" alt="">
            <img class="first-hover-img" src="https://via.placeholder.com/40x40" alt="">
        </div>
        <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">
        <div class="img">
            <img class="service-img" src="https://via.placeholder.com/40x40" alt="">
            <img class="service-hover-img" src="https://via.placeholder.com/40x40" alt="">
        </div>
        <span>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, reiciendis.
        </span>
    </div>
</div>

Answer 3

Когда я смотрю на вашу ссылку, кажется, что проблема возникает из-за чего-то другого: вы устанавливаете границы на .7px и по какой-то причине то, как браузер рендерит, заставляет вещи перемещаться вверх / вниз на 1px при наведении курсора.Я не совсем уверен, что из-за того, что .7px когда-либо будет округляться до 1px, поскольку в браузере нет такой вещи, как частичный пиксель, но если вы измените его на 1px вместо .7, движение останавливается, по крайней мере, в браузере Chrome на моем MacBook Pro.Причина перемещения, вероятно, связана с тем, что браузер пересчитывает абсолютные и относительные позиции этих элементов, когда они добавляются / удаляются с дисплея, и (что-то вроде предположения здесь ...), пока .7 округляется до 1, .7 на обоих так или иначе становится 1.4 и округляется вниз, когда положение обоих элементов принимается во внимание ... или некоторая схожая странность вычисления.Но да, использование только 1px границ вместо .7px, вероятно, сделает s = вашу жизнь проще: -)

В общем, вот некоторая информация, которая, как я изначально думал, будет применима, которая может помочь для дальнейшего использования в подобных ситуациях.:

Когда вы изменяете непрозрачность, элемент, который становится видимым / невидимым, все равно будет занимать место на странице - это означает, что окружающие элементы будут позиционировать себя так, как если бы этот элемент занимал пространство, потому что этопросто прозрачныйпереключение дисплея: нет;фактически удаляет элемент для потока документов, поэтому элементы вокруг него действуют так, как будто его там нет - когда он возвращается, они все перемещаются, чтобы освободить место для него.Если вы не хотите использовать прозрачность, но хотите, чтобы элемент продолжал занимать место, когда он скрыт, вы можете переключаться между visibility:hidden и visiblity:visible

Хорошее объяснение здесь: Чточем разница между видимостью: скрытым и отображаемым: нет?