Toggle between displaying and concealing content by clicking or hovering the mouse

I have a button that is positioned at the top of the browser. I want to show a dropdown list when the user clicks or hovers over this 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;
}

With this HTML structure, I aim to display the "translate-dropdown" div when the user interacts with the "translate-btn," either by clicking on it or hovering over it.

I'm wondering if achieving this effect is possible using only CSS, or if I'll need to use jQuery for it.

If anyone has any insights or suggestions, I would greatly appreciate the help. Thank you!

jqueryhtmlcss

Answer №1

Here is a CSS solution:

.translate-dropdown {
    display: none;
}

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

Check out this complete demonstration:

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

Answer №2

When it comes to tasks like this, relying solely on CSS can be limiting. For a different approach, consider using JavaScript with jQuery (especially if you're not experienced with working in CSS):

$(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');
// You can also toggle a class name here to keep track of the div's state and show or hide based on that.

                    }
                });
        }

If needed, you have the option to utilize jQuery's .hide() and .show() methods instead of directly manipulating CSS with .css(), though bear in mind these functions will set display: none which may not always align with your intentions for hiding elements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

error occurred while looping through json array

i am encountering an issue with a code that keeps returning an "undefined" message instead of the expected HTML output. Purpose of function: the aim of the following function is to display notifications in a manner similar to those on Facebook. The code se ...

javascriptjqueryjson

Is there a way for me to make my image source dynamically switch between 3-4 different images when hovered over?

I'm in the midst of a college project where I'm designing a clothing website. What I'm aiming for is to have the product image on the main feed change between 3-4 images of the same product with a quick transition when a user hovers over it. ...

javascripthtmlcssimagesrc

Illustrate JSON API information in an HTML unordered list

I am facing a challenge with converting JSON data into an unordered list using HTML or PHP. Here is the API key I am currently working with: While I have successfully parsed the raw JSON data with the provided code snippet: <script> $.ajax({ t ...

phpjqueryjsonapijsonp

Is there a way to perform unit testing on JavaScript code that runs following the completion of a CSS transitionEnd event

I am working with a bootstrap modal window and using qunit+sinonjs (fake timers). However, I have noticed that one element (div class='modal-backdor') remains on the page despite my efforts. You can view the issue here: http://jsfiddle.net/valu ...

javascriptcsscss-transitionsqunitsinon

Issue with setting active class on current html page using Bootstrap 5 and Flask

I am currently developing a flask web application and I am focusing on customizing the navigation bar. Utilizing bootstrap 5 for styling purposes, I am attempting to apply the 'active' class when a specific navbar page is clicked with the followi ...

htmlflaskbootstrap-4navbarbootstrap-5

Tips for incorporating Material.io outlined icons within css pseudoelements (::before) usage

I'm attempting to incorporate the Material.io icon into a button using ::before, but it is appearing filled rather than outlined. Unfortunately, there are no available instructions on how to display the icon in an outlined style. This is the code I ...

cssiconsmaterial-designmaterial-ui

Large header picture

Instead of tiptoeing around the issue, let me just be blunt and ask: I'm curious about how they created this image header. Even after removing all javascript code and css using Chrome's property inspector, the image continued to stretch. The sty ...

javascriptcssfullscreen

Can elements be prevented from resizing in relation to another element without using position:absolute?

Is there a way to prevent elements in a <div> from moving when an adjacent element is resized, without using position:absolute? Any help would be greatly appreciated. Thank you in advance! ...

javascriptjqueryhtmlcss

Remove any errors as soon as the input field becomes valid

My current setup involves AngularJS with node.js. To handle errors, I have devised the following strategy: node router effect.js: router.post('/', function(req, res, next){ req.checkBody('name', 'Eff ...

javascripthtmlangularjsnode.js

Sending an AJAX request to a REST service in order to submit the information captured in an HTML form

<html> <body> <form method="POST"> <label>username</lable> <input id="username" name="username" type="text"> <label>emailid</lable> <input id="emailid" ...

javascriptjqueryajaxrestpost

I'm seeking assistance with a frontend script problem. I'm curious if there are alternative approaches to coding this script that may be more effective. Can anyone offer guidance on this?

As a frontend developer specializing in script injection, I have been utilizing Adobe Target to inject scripts. However, this method presents several challenges: 1. It is difficult to debug code errors as my HTML and CSS are wrapped inside ' ' a ...

javascripthtmlcssfrontend

Error: The NgTable in AngularJS is not defined when reloading the page

I have successfully implemented Angularjs NgTable with pagination inside a tab provided by Angularjs Material in various parts of my project. However, I am facing an issue where I am unable to reload the tables in this particular case. I am unsure of what ...

javascriptangularjshtmlangularjs-directivengtable

Angular Material: div not being filled by layout-fill

<!-- Container Div --> <div layout-fill> <!-- Image Div --> <div layout="column" layout-align="center center" class="coverImage" layout-fill> <md-content class="md-padding"> Sample Text Here ...

javascriptcssangularjsflexboxmaterial-design

Include a clickable jQuery icon in an HTML document for testing purposes

Is there a way to include an icon [+] at the end of this statement, so that when clicked it triggers an alert? <div id="catalog" style="width: 518px;"> <ul id="catalog111" style="left: -37px;top: -140px;width=500%;"> < ...

jqueryhtml

Utilizing Ajax, JavaScript, and Webmatrix to dynamically refresh a select box

I'm a beginner when it comes to working with Ajax. The goal I am aiming for seems like a common one. I have two dropdown boxes, "area" and "resort", that are connected to my database. The concept is simple: when a user selects an area from the first ...

sqlajaxjqueryrazorwebmatrix

Laravel's routing system may cause complications when trying to send data via jQuery AJAX post requests

My current challenge involves passing an ID to a PHP script through AJAX. Previously, everything was working perfectly with the code snippet below: var baseURL = '/W4W/public/'; function voteUp(){ var snippetID = document.getElementById(&ap ...

javascriptphpjqueryajaxlaravel

The functionality of CSS Inline Block display is not displaying inline as expected

I have the following HTML and CSS code, but I am having issues getting the dropdown to display inline. .project Type{ display: inline-block; } <form class="smart-form"> <div class="row"> <div class="col col-sm-6 col-md-2 col-lg- ...

htmlcssangularformsbootstrap-4

A step-by-step guide to parsing a JSON string with jQuery

Attempting to extract data from a JSON string using jQuery, but encountering issues with retrieving values. var jsonString = '{"data":{"2G":[{"amount":"9","detail":"35 MB 2G Data , Post 35 MB you will be charged at 4p\/10kb","validity":"1 Day"," ...

javascriptjqueryjsonjsonpath

Can AJAX be exploited by hackers?

Today, I had a fascinating experience with my built systems. Someone managed to "hack" into everything and attributed the issue to AJAX. Here are his exact words: you are relying on AJAX when I have access to user's browser I have acc ...

javascriptjqueryajax

Angular JS has a unique feature of a scrollable drop-up menu that allows

https://i.sstatic.net/MOUqO.pngHere is the code snippet for my Dropup component: <div class="dropup"> <button class="btn btn-primary btn-raised dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false> ...

javascripthtmlcssangularjs