I have a html page like this and when I hover the volume button which located on the right, the div box which contains the Upload and Delete function should be displayed beside with the volume icon. What I expect is when I hover the volume icon, the Upload, Delete and volume icon should be displayed in the same line, like picture below
and grey panel will not be overflowed out of the box.

Does anyone have an idea how to set again the stylesheet to show this situation ?

I have a html page like this and when I hover the volume button which located on the right, the div box which contains the Upload and Delete function should be displayed beside with the volume icon. What I expect is when I hover the volume icon, the Upload, Delete and volume icon should be displayed in the same line, like picture below
and grey panel will not be overflowed out of the box.

Does anyone have an idea how to set again the stylesheet to show this situation ?

• javascript
• jquery
• html
• css
• twitter-bootstrap

• 1 Question title doesn't help... try "How to display an action list on hover using bootstrap?" – SparK Commented Jan 27, 2016 at 11:11

3 Answers 3

make .prompt-audio-control display inline-block when they view on hover and not inline in order to fit next to each other:

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

Updated Fiddle: https://jsfiddle/y2ee6fsc/2/

Your elements that appear after hover had different value for display property. You can make them inline-block.

In order to make them on one line without changing html structure, you could remove overflow: hidden from .btn-file.

https://jsfiddle/wca36rqu/3/

i did some changes on your html and css maybe it will be help for you. https://jsfiddle/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>