CODEWITHSUNDEEP
jqueryhtmlcss
user3733831
user3733831

Reputation: 2926

show and hide contents with mouse click or mousehover

I have a button and positioned it on top of the browser. So I need to display a dropdown list when mouse click or mouseover on 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 "translate-dropdown" DIV when user click or mouseover on "translate-btn".

Can anybody tell me is it possible with pure CSS or do I need to use jquery for this?

Hope somebody may help me out. Thank you.

Upvotes: 3

Views: 2014

Answers (2)

Adib Aroui
Adib Aroui

Reputation: 5067

Pure CSS has limitations for this kind of task. Here is a javascript approach using jQuery (As I am not a CSS developper):

$(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 of .css() but these will set the CSS display: none which is not always the goal of hiding elements.

Upvotes: 1

alan0xd7
alan0xd7

Reputation: 1851

Using just CSS:

.translate-dropdown {
    display: none;
}

.translator:hover .translate-dropdown {
    display: block;
}

Full 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>

Upvotes: 5

Related Questions