Question

请检查this example。有两个项目，每当我将first悬停在项目上时，第一个图像消失，第二张图像出现。同时，在dialog项的右侧显示一个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;
}

Answer 2

当我查看您的链接时，似乎是其他原因导致了该问题：您正在将边框设置为.7px，并且由于某种原因，浏览器的渲染方式会导致鼠标悬停时上下移动1px。我不确定是什么使.7px变为四舍五入到1px，因为就浏览器而言，实际上并没有像部分像素这样的东西，但是如果将其更改为1px而不是.7，，至少在我的macbook pro的Chrome浏览器中，移动停止了。发生移动的原因可能是由于浏览器重新计算了这些div的绝对位置和相对位置（在添加/删除显示时），以及.7舍入为1时（这里有些猜测……）。，则当考虑到两个元素的位置时，两者上的.7都以某种方式变为1.4并四舍五入...或类似的计算奇数。但是，是的，仅使用1px边框而不是.7px边框可能会使s =您的生活更加轻松：-）

通常，以下是我最初认为适用的一些信息，可能会在类似情况下为将来提供参考：

更改不透明度时，被设置为可见/不可见的元素仍将在页面中占据空间-意味着周围的元素仍将自己定位，就像该元素在那里占据了空间一样，因为它只是透明的。切换显示：无；实际上删除了文档流的元素，因此它周围的元素的行为就像它不存在一样-当它回来时，它们都会移动以为其留出空间。如果您不想使用不透明度，但是希望元素在隐藏时继续占用空间，则可能需要在visibility:hidden和visiblity:visible之间进行切换

很好的解释：What is the difference between visibility:hidden and display:none?

Answer 3

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

为什么要更改职位？

3 个答案: