Menu background changes color while hovering over a new item being added

Question

Menu background changes color while hovering over a new item being added

Currently working on a straightforward menu that allows users to add new items. The issue arises when the user clicks on the last div ("new item"), causing a new item to be created and shifting the last item to the right, resulting in a flickering hover effect on the last item.

// locating elements
var button = $("button")
var container = $('.container');
var newBtn = $('.new');

newBtn.on('click', function() {
$('<div class="row">blinking new</div>').insertBefore(newBtn)
})

body {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  background: gray;
  height: 30px;
}
.row {
  background: green;;
  width: 100px;
}
.row:hover {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">firstg </div>
  <div class="row">second </div>
  <div class="new row">new item</div>
</div>

Chrome: The background of the latest item blinks when the hover target changes.
IE11: When a new item is added, IE does not repaint the menu, resulting in the preservation of the hover state of the latest item even if the cursor is placed on the newly added item.
https://i.sstatic.net/6eQJu.gif Is there any workaround available to resolve this issue?

javascript html css hover

Answer 1

Answer №1

If you want to keep the hover state on the current element without having to switch, try changing the button into a new element and then creating a new button:

// locate elements
var button = $("button")
var container = $('.container');
var newBtn = $('.new');
function handleClick() {
    var newDiv = newBtn.clone();
    newDiv.insertAfter(newBtn);
    newBtn.html('blinking new');
    newBtn.off('click')
    newBtn = newDiv;
    newBtn.on('click', handleClick);
}
newBtn.on('click', handleClick)

body {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  background: gray;
  height: 30px;
}
.row {
  background: green; 
  width: 100px;
}
.row:hover {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">firstg </div>
  <div class="row">second </div>
  <div class="new row">new item</div>
</div>

Answer 2

If you want to keep the hover state on the current element without having to switch, try changing the button into a new element and then creating a new button:

// locate elements
var button = $("button")
var container = $('.container');
var newBtn = $('.new');
function handleClick() {
    var newDiv = newBtn.clone();
    newDiv.insertAfter(newBtn);
    newBtn.html('blinking new');
    newBtn.off('click')
    newBtn = newDiv;
    newBtn.on('click', handleClick);
}
newBtn.on('click', handleClick)

body {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  background: gray;
  height: 30px;
}
.row {
  background: green; 
  width: 100px;
}
.row:hover {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">firstg </div>
  <div class="row">second </div>
  <div class="new row">new item</div>
</div>

Answer 3

Answer №2

The issue arises from how the new button is being inserted into the menu. It causes the "new item" to be moved to the end, while still retaining its hover state. As your mouse hovers over the new button, it gains focus and changes color to yellow.

To resolve this, use .append() to add the new button at the end of the menu. This way, the mouse remains over the same button throughout, preventing any change in focusing. Then, move the "new item" to the end using another .append().

In essence, the problem lies in the combination of your :focus CSS selector and the method of adding content with .insertBefore. Switching to .append() will eliminate this issue.

// locate elements
var button = $("button")
var container = $('.container');
var newBtn = $('.new');

newBtn.on('click', function() {
  // Add the new button at the end of the menu
  $(".container").append('<div class="row">blinking new</div>');
  
  // Move the "new item" button to the end of the menu
  $(".container").append(this);
});

body {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  background: gray;
  height: 30px;
}
.row {
  background: green; 
  width: 100px;
}
.row:hover {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">firstg </div>
  <div class="row">second </div>
  <div class="new row">new item</div>
</div>

Answer 4

The issue arises from how the new button is being inserted into the menu. It causes the "new item" to be moved to the end, while still retaining its hover state. As your mouse hovers over the new button, it gains focus and changes color to yellow.

To resolve this, use .append() to add the new button at the end of the menu. This way, the mouse remains over the same button throughout, preventing any change in focusing. Then, move the "new item" to the end using another .append().

In essence, the problem lies in the combination of your :focus CSS selector and the method of adding content with .insertBefore. Switching to .append() will eliminate this issue.

// locate elements
var button = $("button")
var container = $('.container');
var newBtn = $('.new');

newBtn.on('click', function() {
  // Add the new button at the end of the menu
  $(".container").append('<div class="row">blinking new</div>');
  
  // Move the "new item" button to the end of the menu
  $(".container").append(this);
});

body {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  background: gray;
  height: 30px;
}
.row {
  background: green; 
  width: 100px;
}
.row:hover {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">firstg </div>
  <div class="row">second </div>
  <div class="new row">new item</div>
</div>

Menu background changes color while hovering over a new item being added

Answer №1

Answer №2

Similar questions

Adding PHP information into a div using AJAX

Arranging nested columns in a different order for smaller devices with Bootstrap 4

Slide the menu off to the right

Can we make one tab disappear when another tab is clicked in Ionic 2 app menu icon?

Align the <div> vertically within the <td> tag

transfer a product attribute value to a different product attribute within the Magento platform

Adding a <script> tag to a div id using reactjs

The forceShutdown function in the node.js grpc server does not properly terminate the server

Replicate the action of highlighting a section of a website and copying it to the clipboard using JavaScript

Mysterious HTML/CSS element causing page to stretch beyond limits

Interactive features causing compatibility problems with Next.js 14 server communication, including API calls and data transmission to components

Creating an Angular directive that shares a single scope while displaying multiple behaviors

Trouble accessing state when React child calls parent method

Using AngularJS to prevent HTML injection in input fields

Assign the default value of a Vue prop to the options of its parent component

Steps for creating a table with a filter similar to the one shown in the image below

What is the best way to showcase the contents of an array of objects from JavaScript on an HTML page in a dynamic

What is the best way to implement auto-refreshing with reactQuery?

Locating HTML snippets within a document

Adding dots between page numbers when using ReactJS/Javascript Pagination can be achieved by implementing a specific method