Issues with button hover causing background transition difficulties

I've been trying to achieve a smooth background image transition upon hovering over my buttons. Despite searching for solutions in various posts, I haven't been successful in applying any of them to my code. I realize that J Query is the way to go, but I can't seem to get it to work either. Here's my current code without any J Query attempts: http://jsfiddle.net/6YEAG/26/

        function SwapInst()
        {
            document.getElementById("BG").style.backgroundImage = "url(/Images/Instruments.jpg)";
        }
.Button
{
    background: rgba(255, 255, 255, .5);
    font-family: 'Cinzel', serif;
    font-size: 20px;
    border: none;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
.Button:hover
{
    background: rgba(15, 0, 0, 0.3);
    font-family: 'Cinzel', serif;
    border: none;
    color: black;
    padding: 13px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
  <body class="body" id ="BG" style="height: 645px; background-image:url(/Images/Menu.jpg); background-size:auto;">
  <div style="font-size: 25px; color: black; text-align:center;" id ="MainHeader">
    <br />
    <h1> RED INSTRUMENTS </h1>
    <h2> Instruments and parts shop </h2>
  </div> 
  <div style="font-size: 30px; color: black; text-align: center;">
           <br />
           <br />
           <br />
            <input class="Button" onmouseover="SwapInst()" id="InstButton" type="button" value="Our Instruments" />
            <input class="Button" id="PartsButton" type="button" value="Our Parts" />
            <input class="Button" id="ContactButton" type="button" value="Contact us" />
  </div>
  </body>

javascriptjqueryhtmlcss

Answer №1

Transform your button backgrounds flawlessly with Jquery. Check out the live demo below:

https://jsfiddle.net/dhirenpateldev/dmtz34ma/1/

Here's the HTML markup:

<body class="body" id ="BG" style="height: 645px;">
  <div style="font-size: 25px; color: black; text-align:center;" id ="MainHeader">
    <br />
    <h1> RED INSTRUMENTS </h1>
    <h2> Instruments and parts shop </h2>
  </div> 
  <div style="font-size: 30px; color: black; text-align: center;">
           <br />
           <br />
           <br />
            <input class="Button"  id="InstButton" type="button" value="Our Instruments" />
            <input class="Button" id="PartsButton" type="button" value="Our Parts" />
            <input class="Button" id="ContactButton" type="button" value="Contact us" />
  </div>
  </body>

And here's the accompanying script:

   $(document).ready(function() {
    $("#InstButton").on({
        mouseenter: function() {
           $("#BG").parent().css('background-color', 'red');
          // $("#BG..parent().css('background-image', "url('/ Put Your Web Link Here /')");")
        },
        mouseleave: function() {
           $("#BG").parent().css('background-color', 'White');
        }
    });
     $("#PartsButton").on({
        mouseenter: function() {
           $("#BG").parent().css('background-color', 'green');
        },
        mouseleave: function() {
           $("#BG").parent().css('background-color', 'White');
        }
    });
     $("#ContactButton").on({
        mouseenter: function() {
           $("#BG").parent().css('background-color', 'blue');
        },
        mouseleave: function() {
           $("#BG").parent().css('background-color', 'White');
        }
    });

});

Additionally, here is the CSS for styling the buttons:

.Button
{
    background: rgba(255, 255, 255, .5);
    font-family: 'Cinzel', serif;
    font-size: 20px;
    border: none;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
.Button:hover
{
    background: rgba(15, 0, 0, 0.3);
    font-family: 'Cinzel', serif;
    border: none;
    color: black;
    padding: 13px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

Experience seamless button style changes utilizing jquery.

Give it a try and see how it enhances your user interface!

Answer №2

Have you experimented with the css property transition for your styling needs?

http://www.w3schools.com/css/css3_transitions.asp

.Button
{
    background: rgba(255, 255, 255, .5);
    font-family: 'Cinzel', serif;
    font-size: 20px;
    border: none;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
.Button:hover
{
    transition: background 1s rgba(15, 0, 0, 0.3);
    font-family: 'Cinzel', serif;
    border: none;
    color: black;
    padding: 13px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

Answer №3

.button-array {
  text-align: center;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: center;
  }

.button {
  font-size: 21px;
  text-align: center
  align-self: auto;
  padding: 20px;
  -webkit-transition:all 0.3s ease 0s;
  -moz-transition:all 0.3s ease 0s;
  transition: all 0.3s ease 0s
  }

.button:hover {
  background-color: #ccc;
  background-image: url(http://i66.tinypic.com/3029ua0.jpg);
  }
<div class="button-array">
  <div class="button">
    Our Instruments
    </div>
 <div class="button">
    Our Parts
    </div>
  <div class="button">
    Contact Us
    </div>
  </div>

You could use CSS to easily manage the alignment and effects of your buttons. The code snippet above demonstrates how the flex property can help with alignment, and the :hover class for creating an effect on hover. Alternatively, you can also incorporate an image background for a more visually appealing design.

Answer №4

To achieve the desired effect, using opacity is necessary. However, applying opacity directly to the body element would result in making the entire page invisible.

Instead, I opted to utilize a pseudo element to solve this issue.

Given that this code snippet doesn't have an assigned ID for the body element (which might not be possible or known how to do), accessing the body becomes a bit more challenging:

let test = document.getElementById('test');
let body = document.getElementsByTagName('body')[0];
test.addEventListener("mouseenter",function(){
    body.className = 'active';
});
test.addEventListener("mouseout",function(){
    body.className = '';
});
html, body {
    width: 100%;
    height: 100%;
    position: relative;
}

body:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(http://lorempixel.com/400/200);  
    background-size: cover;
    opacity: 0;
    transition: opacity 0.5s;
    z-index: -1;
}

body.active:after {
    opacity: 1;
}

#test {
    width: 80px;
    height: 50px;
    border: solid 1px red;
    background-color: white;
    margin: 10px;
}
<div id="test">test</div>

Answer №5

One possible solution is to incorporate the CSS3 transition property:

.Button
{
    /*your code here*/
    .......
    transition:all 0.8s;
}
.Button:hover
{
    /*your code here*/
    .......
    background-image: url(http://i66.tinypic.com/3029ua0.jpg);
}

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

Angular's parent div height can be adjusted using CSS transitions

I have implemented a CSS transition to create a sliding effect in my pagination. However, I am facing an issue where the height of the containing div changes even when I set the position of the transitioned elements. Here is a snippet of my CSS: .slide { ...

javascriptcssangularjscss-transitions

Adjust column content to fit width, instead of setting width to 100%

To create columns for the ul, I used flex-direction: column and flex-wrap: wrap. When the elements within the ul are split into multiple columns, each column takes on the width of the widest content in that column. However, if there is only one column, it ...

htmlcssflexbox

Issue with spacing dropdown choices within primary navigation bar

Struggling with my final project for a class as the semester comes to a close. I've received minimal help from my Professor and hit a roadblock. The main navigation on the side is working correctly, but the dropdown options are stacking on top of each ...

htmlcss

CSS: the max-width property does not constrain an absolute positioned container from overflowing

I've been trying to figure this out for hours, but I can't seem to get it right. My top menu has submenus that include a popup menu. In one of my popups, I need the container to have a maximum width of 170 pixels and all the items inside to wra ...

htmlcss

JavaScript implementation of the results sorting

I have 2 sql queries to calculate the turnover for each semester. Results from query 1: { "LRU": [ "RADOME", "RADOME", "ATSU", "MFC", "FWC", "Unspecified", "AZE", "ECP", "CMM", "ECP" ], "Client": [ 17346, ...

javascript

Having trouble resolving the FancyBox Jquery conflict and unable to find a solution

Attempting to implement FancyBox on a website. The demo is functional, proving its capability. Yet, encountering an error when trying to integrate it within the WordPress theme: Uncaught TypeError: $(...).fancybox is not a function The header file cont ...

javascriptphpjqueryajax

Guide to triggering React Material-UI modal and filling it with data from an Ajax request when a button is clicked

Despite my efforts to find a similar question, I couldn't come across one. My apologies if I overlooked it. Currently, I am working on a React Material-UI project to develop a basic web application. Within this application, there is an XGrid that disp ...

javascriptreactjsmaterial-ui

Issue with using bind(this) in ajax success function was encountered

In my development process, I utilize both react and jQuery. Below is a snippet of the code in question. Prior to mounting the react component, an ajax request is made to determine if the user is logged in. The intention is for the state to be set when a ...

javascriptjqueryajaxreactjs

Adjusting the height of an element as you scroll will activate the scroll event

One issue I'm facing is with adding a class to my header. The goal is to reduce the height of the top part of the header when the user scrolls down and then remove the class when they scroll back up. While this functionality is working, there is an un ...

javascriptjquerycssonscroll

Ensuring the footer stays at the bottom of the page using Tailwindcss and ReactJS

I've read numerous articles and posts about achieving this, but none of the methods seem to be effective for me. My goal is to have the footer stick to the bottom of the page when viewed on mobile devices. It displays correctly on larger screens, but ...

cssreactjstailwind-css

The local HTTP server is having trouble establishing a connection with the Firebase user

Utilizing Visual Studio Code editor and a node js HTTP server, I have developed a simple login page and created a user in firebase. However, I encountered an issue with logging in using the username. The code for the webpage was written in HTML and bootstr ...

htmlnode.jsfirebasefirebase-authenticationsimplehttpserver

Creating a dynamic user interface with HTML and JavaScript to display user input on the screen

I'm currently working on creating an input box that allows users to type text, which will then appear on the screen when submitted. I feel like I'm close to getting it right, but there's a problem - the text flashes on the screen briefly bef ...

javascripthtml

What steps can I take to avoid scaffold.css from taking precedence over my custom CSS?

I'm having trouble with this. It seems like a small issue, but I'm still very new to learning about rails. Any help you can provide would be greatly appreciated! Solution: To resolve the problem, I accessed the file responsible for adding head ...

ruby-on-railscss

JavaScript array displaying excess whitespace in its presentation

https://i.sstatic.net/5AdA7.png One issue I am facing is that when I use console.log(a), it adds extra spaces which then flow through to the backend. This leads to each element breaking after the first one. How can I resolve this problem and why does it o ...

javascriptarrays

Refreshing a data object that is shared among Vue components

I've recently started diving into Vue, and I've found myself responsible for tweaking an existing codebase. There's this data.js file that caught my attention, containing a handful of objects holding city information, like: export default { ...

javascriptvue.jsvuejs2

software tool for managing state transitions

Can anyone recommend a superior javascript library for workflows? Right now, I'm utilizing Joint JS, but I require something with a more visually appealing interface (users tend to prefer that). ...

javascriptflowchart

Emphasizing cells by their specific values

I have a basic website that displays a table showing user subscriptions. To update the data from my SQL server, I'm using jQuery/AJAX dynamically. I want to highlight the table when a user's subscription exceeds a certain threshold. For instan ...

jqueryhtml-tablehighlighting

Ensuring that the second level unordered list is set to a height of 100% of the first unordered list, rather than the

I'm working with this menu http://codepen.io/alexandernst/pen/oxpGYQ (I wanted to include it here but the result viewer on SO is causing some display issues...) and I am trying to ensure that the second and third level ul elements are the same height ...

htmlcss

design facebook type box scroll bar

After extensively searching through various stackoverflow answers in an attempt to change the CSS for a Facebook likebox scrollbar, I have had no success. Below is the code that I am currently using: <div id="fb-root"></div> <script>(fun ...

javascriptjqueryhtmlcssfacebook

Is there a way to have a fixed width div positioned in the center of the screen, with two additional divs on either side

I have come across this stunning image: https://i.stack.imgur.com/tUYMc.png It serves as a header for a website - click on it to see the full size. I am trying to replicate this using HTML, CSS, and images, but I'm struggling. It needs to be 100% w ...

htmlcss