css - 溢出 :auto changes internal div element width

Question

HTML:

<div id="jhjhssed" class="hhsfjhjruweyr" id="fhsdjfhsss" style="">
    <div class='bubble5'>Andrew Stockard
        <img src='Status-tray-online-icon (1).png' class='onlinecircle' />
    </div>
</div>

CSS:

.bubble5 {
    position: relative;
    top: -27px;
    word-wrap: break-word;
    font-size: 15px;
    margin-left: 51px;
    width: auto; 
}
.hhsfjhjruweyr {
    text-shadow: 0 1px 0 #fff;
    color: #000;
    font-family: Arial;
    border-top: 1px solid #8d8d8d;
    overflow: hidden;
}
.hhsfjhjruweyr:hover {
    overflow-y: auto;
}
.onlinecircle {
    position: absolute;
    top: 1px;
    right: 5px;
}

问题是，当我将鼠标悬停时，滚动条会按预期显示，但是当我将鼠标悬停在具有 id jhjhssed 的 div 中的所有元素的宽度发生变化时。通过更改我的意思是它变得更小以适合下一次悬停时的滚动条..我想要的是...显示滚动条时宽度变化很好但我希望它在滚动条不再可见时返回到 100% 宽度我甚至尝试将 width:100% 添加到 div jhjhssed 但它不起作用..我该怎么做...

无滚动条:

滚动条:

出现滚动条后:

它应该是什么样子:

希望我能说清楚..

Answer 1

与各种浏览器最兼容的解决方案可能涉及使用 JavaScript。

我最喜欢的跨浏览器 JavaScript 库是 jQuery，我推荐以下解决方案:

$('.hhsfjhjruweyr').mouseout(function(){
    $(this).css('overflow-y', 'hidden');
});

顺便说一句，你从哪里得到像“hhsfjhjruweyr”这样的类名？