Home / Questions / 28940
Accepted
Pavlo B.
Asked: 2020-10-21 03:15:10 +0800 CST 2020-10-21 03:15:10 +0800 CST

Hoverable dropdown button

  • 772

I have a dropdown that opens when I hover over it made with HTML and CSS like so:

.dropdown {
    position: relative;
    display: inline-block;
}
.dropbtn {
    height:30px;
    width:160px;
    background-color: #da291c;
    color: #ffffff;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #653734;
    min-width: 100px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 5px 7px;
}

.dropdown:hover .dropdown-content {
    display: block;
}
<div class="dropdown">
					<button class="dropbtn"><?php echo $lang['topbar_string_1']; ?></button>
	<div class="dropdown-content">
		<div class="row no-margin no-padding">
			<form>
				<div class="col-xs-12 no-padding ">
					<label class="white-text"><?php echo $lang['topbar_string_2']; ?></label>
					<input type="text" class="form-control"/>
				</div>
				<div class="col-xs-12 no-padding ">
					<label class="white-text"><?php echo $lang['topbar_string_3']; ?></label>
					<input type="password" class="form-control"/>
				</div>
				<div class="col-xs-12 no-padding ">
					<button class="my-btn btn-primary" type="submit"><?php echo $lang['topbar_string_4']; ?></button>
				</div>
				<div class="col-xs-12 no-padding ">
					<a class="white-text" href="#"><?php echo $lang['topbar_string_5']; ?></a>
				</div>
			</form>
		</div>
	</div>
</div>

But I have run into a problem and it is that even if I click on an input to write and move the mouse out of the content of the dropdown, it disappears, and I need that if I click on it it no longer disappears, that it only disappears if I have I hovered the mouse over it and didn't click anything.

html

1 Answers

  1. Best Answer

    Using jQuery you can do the following:

    var inputs = $(".dropdown-content input");

inputs.on("focus blur", function() {
  $(this).parents(".dropdown-content").toggleClass("open");
});

    We select the inputswithin the content of your dropdownand assign two events to them. focuswhen he is focused inputand blurwhen he loses focus.

    We use the function parents()to traverse the DOM but with a selector to get to .dropdown-contentand then use toggleClassto add and remove the class depending on whether there is focus or not.

    Class:

    .open {
  display: block;
}

    CODE FRAGMENT:

    var inputs = $(".dropdown-content input");

inputs.on("focus blur", function() {
  $(this).parents(".dropdown-content").toggleClass("open");
});
    .dropdown {
  position: relative;
  display: inline-block;
}
.dropbtn {
  height: 30px;
  width: 160px;
  background-color: #da291c;
  color: #ffffff;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #653734;
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 5px 7px;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.open {
  display: block;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <button class="dropbtn">
    <?php echo $lang[ 'topbar_string_1']; ?>
  </button>
  <div class="dropdown-content">
    <div class="row no-margin no-padding">
      <form>
        <div class="col-xs-12 no-padding ">
          <label class="white-text">
            <?php echo $lang[ 'topbar_string_2']; ?>
          </label>
          <input type="text" class="form-control" />
        </div>
        <div class="col-xs-12 no-padding ">
          <label class="white-text">
            <?php echo $lang[ 'topbar_string_3']; ?>
          </label>
          <input type="password" class="form-control" />
        </div>
        <div class="col-xs-12 no-padding ">
          <button class="my-btn btn-primary" type="submit">
            <?php echo $lang[ 'topbar_string_4']; ?>
          </button>
        </div>
        <div class="col-xs-12 no-padding ">
          <a class="white-text" href="#">
            <?php echo $lang[ 'topbar_string_5']; ?>
          </a>
        </div>
      </form>
    </div>
  </div>
</div>

    • 4