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;
}

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

无滚动条：

enter image description here

滚动条：

enter image description here

滚动条出现后：

enter image description here

应该是什么样子：

enter image description here

希望我能说清楚自己......

Answer 1

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

我最喜欢的跨浏览器JavaScript库是jQuery，我建议使用以下解决方案：

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

顺便说一下，你在哪里得到像“hhsfjhjruweyr”这样的课程名称？

溢出：自动更改内部div元素宽度

1 个答案: