What is the process for creating a hover effect on a button that is triggered when a user hovers over the button's parent container?

Question

What is the process for creating a hover effect on a button that is triggered when a user hovers over the button's parent container?

My Goal:

I want the hover effect that normally applies to buttons when hovered over, to instead be applied when a user hovers over the parent div containing those buttons.

The parent divs in question have a class of "serviceContent". Within these parent divs are blue buttons labeled "Find out more".

I attempted to achieve this using the following jQuery code:

$('.serviceContent').mouseover(function() {
  $(this).find('.btn').trigger('mouseover')
})

However, this approach does not seem to work. Is there another method or event that can be triggered to replicate the hover effect on the button when hovering over its parent div?

Thank you for your help!

jquery css

Answer 1

Answer №1

Give this a shot

$(document).ready(function(){
$(".serviceContent").mouseover(function(){
$("button").addClass("button-hover");
});
$(".serviceContent").mouseout(function(){
$("button").removeClass("button-hover");
});
});

Include this class in your CSS file .button-hover{color: red;}

Answer 2

Give this a shot

$(document).ready(function(){
$(".serviceContent").mouseover(function(){
$("button").addClass("button-hover");
});
$(".serviceContent").mouseout(function(){
$("button").removeClass("button-hover");
});
});

Include this class in your CSS file .button-hover{color: red;}

Answer 3

Answer №2

Here is a simple CSS code snippet to add hover effects to child elements:

#bestServiceBike:hover .btn.btn-primary{
  background-color:#2639ff;
}
.serviceContent:hover .btn.btn-primary{
  background-color:#2639ff;
  color:#fff;
}

You can see this code in action on this fiddle:https://jsfiddle.net/vn6txgyc/

Answer 4

Here is a simple CSS code snippet to add hover effects to child elements:

#bestServiceBike:hover .btn.btn-primary{
  background-color:#2639ff;
}
.serviceContent:hover .btn.btn-primary{
  background-color:#2639ff;
  color:#fff;
}

You can see this code in action on this fiddle:https://jsfiddle.net/vn6txgyc/

What is the process for creating a hover effect on a button that is triggered when a user hovers over the button's parent container?

Answer №1

Answer №2

Similar questions

Tips for organizing CSS styles into common and unique statements

Exploring best practices for transmitting JavaScript objects and arrays via forms to servers (JSON/??)

Displaying incorrect results within the div container

Creating visually appealing websites is made easy with Bootstrap 5's innovative image and

Having trouble making an Ajax request using the Yahoo API?

JavaScript debugging causing system freeze

What is the best way to center a button element horizontally within a div element?

Guide to implementing tooltips for disabled <li> elements in AngularJS

Placing a Tooltip in the Right Spot

Tips for dragging and dropping a file attachment directly into your web browser

What is the best way to keep horizontal divs aligned in a row with margins between them within a wrapper?

Rails failing to properly decode JSON from jQuery resulting in an array transforming into a hash with integer keys

Why isn't Jquery validate working for the day input?

The Ion-button seems to be malfunctioning

What causes arrays in JavaScript to not be sorted in either ascending or descending order based on dates?

How can I integrate custom PHP pages into Odoo Community 12?

Exploring jQuery selectors with a looping mechanism to trigger click events

Triggering target selection based on the href attribute consistently executing

Utilize the controller data to display information on a day-by-day basis

A tutorial on how to create the appearance of disabled buttons that look the same as enabled buttons through the use