Show and hide content with mouse or mouse
I have a button and positions it on top of the browser. So I need to display the dropdown when I click or hover over this positioned button.
Html
<div class="translator">
<div class="translate-btn">Translator</div>
<div class="translate-dropdown">
<select>
<option>Translate-1</option>
<option>Translate-2</option>
<option>Translate-3</option>
</select>
</div>
</div>
CSS
.translator {
position: absolute;
top: 0;
right: 10%;
z-index: 9999;
}
.translate-btn {
background-color: rgba(136, 121, 91, 0.8);
border-radius: 0 0 5px 5px;
color: #fff;
cursor: pointer;
font-size: 13px;
font-weight: bold;
padding: 4px 15px 5px;
text-align: center;
text-transform: uppercase;
}
Using this HTML, I need to display a "translate-dropdown" DIV when the user clicks or hovers over the "translate-btn".
Can anyone tell me if this is possible with pure CSS or if I need to use jquery for this?
Hope someone can help me. Thank.
source to share
Using CSS only:
.translate-dropdown {
display: none;
}
.translator:hover .translate-dropdown {
display: block;
}
Complete working example:
.translator {
position: absolute;
top: 0;
right: 10%;
z-index: 9999;
}
.translate-btn {
background-color: rgba(136, 121, 91, 0.8);
border-radius: 0 0 5px 5px;
color: #fff;
cursor: pointer;
font-size: 13px;
font-weight: bold;
padding: 4px 15px 5px;
text-align: center;
text-transform: uppercase;
}
.translate-dropdown {
display: none;
}
.translator:hover .translate-dropdown {
display: block;
}
<div class="translator">
<div class="translate-btn">Translator</div>
<div class="translate-dropdown">
<select>
<option>Translate-1</option>
<option>Translate-2</option>
<option>Translate-3</option>
</select>
</div>
</div>
source to share
Pure CSS has limitations for this kind of task. Here's a javascript approach using jQuery (since I'm not a CSS developer):
$(document).ready(function() {
var $target = $('.translate-dropdown');
$('div.translate-btn').on({
mouseenter: function(e){
$target.css('visibility', 'hidden');
},
mouseleave:function(e){
$target.css('visibility', 'visible');
},
click:function(e){
$target.css('visibility', 'visible');
// here you can toggle a class name to track the state of the div and based on the state hide or show it.
}
});
}
You can use jQuery . hide () and . show () instead .css()
, but they will set the CSS display: none
, which is not always the target of hiding elements.
source to share