admin管理员组文章数量:1026989
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 ?
Share Improve this question edited Jan 27, 2016 at 11:20 SparK 5,2112 gold badges25 silver badges32 bronze badges asked Jan 27, 2016 at 11:09 user5567313user5567313 1- 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
Reset to default 5make .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>
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 ?
Share Improve this question edited Jan 27, 2016 at 11:20 SparK 5,2112 gold badges25 silver badges32 bronze badges asked Jan 27, 2016 at 11:09 user5567313user5567313 1- 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
Reset to default 5make .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>
本文标签: javascriptHow to display an action list on hover using bootstrapStack Overflow
版权声明:本文标题:javascript - How to display an action list on hover using bootstrap? - Stack Overflow 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://it.en369.cn/questions/1745656777a2161641.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论