Question

我有一个像this的html页面，当我将鼠标悬停在右侧的音量按钮时，包含上传和删除功能的div框应显示在音量图标旁边。我期望的是，当我将鼠标悬停在音量图标上时，上传，删除和音量图标应显示在同一行中，如下面的图片所示并且灰色面板不会溢出开箱即用。

有没有人知道如何重新设置样式表来显示这种情况？

Answer 1

让.prompt-audio-control在inline-block而不是hover上查看时显示inline，以便彼此相邻：

.prompt-audio:hover .prompt-audio-control {
  display: inline-block;
}

更新小提琴：https://jsfiddle.net/y2ee6fsc/2/

Answer 2

hover之后显示的元素对display属性的值不同。你可以将它们inline-block。

为了在不更改html结构的情况下将它们放在一行上，您可以从overflow: hidden中删除.btn-file。

https://jsfiddle.net/wca36rqu/3/

Answer 3

我对你的html和css做了一些修改，也许对你有所帮助。 https://jsfiddle.net/hamzanisar/j8p44she/

.btn-file {
    position: relative;
    overflow:hidden;
    margin:0 0 -2px 0;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: alpha(opacity=0);
    opacity: 0;
    cursor:pointer;
    display: block;
}
.PlayPromptIcon, PlayPromptIcon:visited {
    color: grey;
}
.PlayPromptIcon:hover {
    text-shadow: 1px 1px 10px black;
}
.prompt-audio-control {
    display: none;
    padding: 0;
    margin: 0;
}
.prompt-audio:hover .prompt-audio-control, .prompt-audio:hover .nm li:nth-child(1), .prompt-audio:hover .nm li:nth-child(2) {
    display:inline-block;
}
.nm{
    margin:0px;
}
.nm li:nth-child(1), .nm li:nth-child(2){
    display:none;
}

<强> HTML

 <div class="container-fluid">
        <div class="input-group prompt" col-xs-2> <span class="input-group-addon">Prompt</span>
            <input type="text" class="form-control tts-prompt" placeholder="Text to Speech Prompt!!" />
            <span class="input-group-addon prompt-audio">
            <ul class="list-unstyled list-inline nm">
                <li>
                    <a href="javascript:;" class="prompt-audio-control" >
                        <div class="btn-file">
                            <input type="file" accept="audio/wav|audio/pcm|audio|vox" />
                            <span> Upload </span> 
                        </div>
                    </a>
                </li>
                <li>
                    <a class="btn-link prompt-audio-control" type="file"> <span> Delete </span> </a>
                </li>
                <li> <a class="PlayPromptIcon" target="_blank"> <span class="glyphicon glyphicon-volume-up"></span></a> </li>
            </ul>
            </span> </div>
    </div>

如何使用bootstrap在悬停时显示操作列表？

3 个答案: