1

Please check this example.There is two item, and whenever I hover the first item, the first image disappears and the second image shows up. At the same time, there is a dialog at the right side of the first item show up. My question is that When I hover the first item, the position change.

I guess this is because I use opacity. I use opacity:0 -> opacity: 1 to show the dialog. But if I use display: none -> display: initial, the bug disappears.

Thanks for your help.

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>
suedar
  • 130
  • 10

3 Answers3

1

It happens because your parent class has a border, so kindly add same border to the child div class also and your problem is resolved.

And if you are concerned for the tool tip position you have to change your css name .container .first .dialog, because you have given height of 40px in class, tool tip position is change.

Suggested css

.container .first {
    border: 0.7px solid transparent;
    width: 50px;
    text-align: center;
}
.container .first .dialog {
   height:auto;
}
Adriano
  • 3,788
  • 5
  • 32
  • 53
deepak panwar
  • 148
  • 1
  • 2
  • 13
0

When I look at your link, it seems something else is causing the issue: You're setting borders to .7px and for some reason the way the browser is rendering that is causing things to move up/down 1px on hover. I'm not really sure what would make .7px ever be anything but rounded up to 1px, since there's not really such a thing as a partial pixel as far as the browser is concerned, but if you change it to 1px instead of .7, the movement stops, at least in the Chrome browser on my macbook pro. The reason for the movement is probably due to the browser re-calculating the absolute and relative positions of those divs when it's added/removed from the display, and (something of a guess here...) while .7 is rounding up to 1, the .7 on both is somehow becoming 1.4 and rounding down when the position of both elements is taken into account...or some similar calculation oddity. But yeah, going with just 1px borders instead of .7px will probably make s=your life easier :-)

In general, here's some info I originally thought would apply, that might help for future reference in similar situations:

When you change opacity, the element being made visible/invisible will still take up space in the page - meaning the surrounding elements will still position themselves like that element is there taking up space, because it is, it's just see-through. toggling display:none; actually removes the element for the document flow, so the elements around it act like it's not there - when it comes back, they all move to make room for it. If you don't want to use opacity, but want the element to keep taking up space when it's hidden, you may want to toggle between visibility:hidden and visiblity:visible

Good explanation here: What is the difference between visibility:hidden and display:none?

ryantdecker
  • 1,754
  • 13
  • 14
0

In your css just remove the transition: opacity 0.6s;display:initial; on hover dialog box. 

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>
Saravana
  • 3,389
  • 4
  • 21
  • 37