So I'm having the following problem. On the snippet below you'll see parts of a larger page project I'm creating. I've a parent DIV that has 2 main children in the form of flex:row - left and right side. (With lots of sub-divs/classes each, that are not displayed here)
The "Products" button is an element/class that belongs in the "Left Side". The Image (color in this snippet) is an element/class that belongs in the "Right Side". When you click on the "Products" button, 2 other buttons appear, and then, when you hover to any of the 3 buttons, the image of the "Right Side" (color) changes accordingly. What I want is to click on the "All Products" button, and change the image(color) of the "Right Side". But what happens, is that it changes after I click, but the moment I move my mouse, it changes back. This doesn't happen when I hover in any of the 3 buttons. The image changes but it remains the same, wherever I move my mouse, as it should, unless I hover to another button.
I tried some methods but I didn't come up with any solution. Any ideas, ladies and gentlemen?
$(document).ready(function() {
var btn_state = true
$("#main_pr_btn").on("click", function(){
if (btn_state != false){
btn_state = false;
$("#main_pr_btn").addClass("active");
$("#all_pr_btn").fadeIn(0300);
$("#recipes").fadeIn(0600);
}
else
{
btn_state = true;
$("#main_pr_btn").removeClass("active");
$("#all_pr_btn").fadeOut(0200);
$("#recipes").fadeOut(0400);
}
})
$("#main_pr_btn").hover(function(){
$(".right_side_img").css({"box-shadow": "45px 45px 150px 50px rgb(255, 255, 255)"});
$(".right_side_img").css({"background-color": "white", "background-size": "115%"});
})
$("#all_pr_btn").hover(function(){
$(".right_side_img").css({"box-shadow": "-45px 35px 100px 20px rgb(255, 255, 255)"});
$(".right_side_img").css({"background-color": "red", "background-size": "180%"});
})
$("#recipes").hover(function(){
$(".right_side_img").css({"box-shadow": "0px 0px 150px 50px #80ffcc"});
$(".right_side_img").css({"background-color": "blue", "background-size": "140%"});
})
$("#all_pr_btn").on("click", function(){
$(".right_side_img").css({"background-color": "yellow", "background-size": "140%"});
$(".left_side_first_page").find("#buttons").css({
"visibility": "hidden",
"opacity" : "0",
"transition" : "0.3s ease-in-out"
});
})
})html {
height: 100%;
}
body {
background-image: linear-gradient(35deg, #073b0e, rgb(2, 17, 54));
font-family: "Aloevera", sans-serif;
background-repeat: no-repeat;
}
.section_1 {
height: 100%;
display: flex;
flex-direction: row;
margin: 5%;
font-family: "Didact Gothic";
}
.section_1 .parent_left_side {
flex: 50%;
display: flex;
flex-direction: column;
word-break: break-all;
justify-content: flex-start;
height: 70vh;
padding: 1vh;
}
.section_1 .parent_left_side .left_side_first_page {
background-color: transparent;
display: flex;
flex-direction: column;
word-break: break-all;
height: 70vh;
justify-content: flex-start;
}
.section_1 .parent_left_side .left_side_first_page #buttons {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-right: 20%;
transition: 0.5s ease-in-out;
z-index: 10;
}
.section_1 .parent_left_side .left_side_first_page #buttons .active button {
box-shadow: 0px 0px 10px 5px rgb(255, 255, 255);
}
.section_1 .parent_left_side .left_side_first_page #buttons #main_pr_btn button {
cursor: pointer;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 40px;
padding-right: 40px;
font-size: 25px;
font-weight: bold;
background-image: linear-gradient(180deg, #d6ee00, rgb(0, 247, 255));
color: rgb(240, 240, 240);
text-shadow: 2px 2px 2px black;
box-sizing: border-box;
border: solid 0px;
border-radius: 4px;
margin-top: 5vh;
transition: all ease-in-out 0.3s;
}
.section_1 .parent_left_side .left_side_first_page #buttons #main_pr_btn button:hover {
box-shadow: 0px 0px 10px 5px rgb(255, 255, 255);
font-size: 24.5px;
}
.section_1 .parent_left_side .left_side_first_page #buttons #all_pr_btn {
display: none;
}
.section_1 .parent_left_side .left_side_first_page #buttons #all_pr_btn button {
cursor: pointer;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 40px;
padding-right: 40px;
font-size: 25px;
font-weight: bold;
background-image: linear-gradient(180deg, #d6ee00, rgb(0, 247, 255));
color: rgb(240, 240, 240);
text-shadow: 2px 2px 2px black;
box-sizing: border-box;
border: solid 0px;
border-radius: 4px;
margin-top: 5vh;
transition: all ease-in-out 0.3s;
padding-left: 20px;
padding-right: 20px;
}
.section_1 .parent_left_side .left_side_first_page #buttons #all_pr_btn button:hover {
box-shadow: 0px 0px 10px 5px rgb(255, 255, 255);
font-size: 24.5px;
}
.section_1 .parent_left_side .left_side_first_page #buttons #recipes {
display: none;
}
.section_1 .parent_left_side .left_side_first_page #buttons #recipes button {
cursor: pointer;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 40px;
padding-right: 40px;
font-size: 25px;
font-weight: bold;
background-image: linear-gradient(180deg, #d6ee00, rgb(0, 247, 255));
color: rgb(240, 240, 240);
text-shadow: 2px 2px 2px black;
box-sizing: border-box;
border: solid 0px;
border-radius: 4px;
margin-top: 5vh;
transition: all ease-in-out 0.3s;
}
.section_1 .parent_left_side .left_side_first_page #buttons #recipes button:hover {
box-shadow: 0px 0px 10px 5px rgb(255, 255, 255);
font-size: 24.5px;
}
.section_1 .parent_left_side .left_side_second_page {
background-color: rgb(0, 71, 62);
display: none;
height: 70vh;
width: 100%;
margin-right: 20%;
margin-top: 100%;
align-self: center;
transition: 0.5s ease-in-out;
z-index: 1;
box-sizing: border-box;
border: solid 0px #ffffff;
box-shadow: inset 0px 0px 30px 10px #ffffff, 0px 0px 20px 1px rgb(255, 255, 255);
}
.section_1 .right_side {
flex: 50%;
display: flex;
flex-direction: column;
word-break: break-all;
height: 60vh;
justify-content: flex-start;
align-items: center;
padding: 1vh;
}
.section_1 .right_side .right_side_img {
background-color: white;
height: 55vh;
width: 55vh;
background-size: 115%;
background-position: center;
background-repeat: no-repeat;
box-sizing: border-box;
border-radius: 50%;
box-shadow: 45px 45px 150px 50px rgb(255, 255, 255);
transform: translate3d(0px, 0px, 0px);
transition: 0.5s ease-in-out;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Main Page</title>
<link rel="stylesheet" href="../mycss/style.css">
<link href="http://fonts.cdnfonts.com/css/aloevera" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Alegreya Sans SC' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Didact Gothic' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="section_1">
<div class="parent_left_side">
<div class="left_side_first_page">
<div id="buttons">
<div id="main_pr_btn">
<button type="button">
Products
</button>
</div>
<div id="all_pr_btn">
<button type="button">
All Products
</button>
</div>
<div id="recipes">
<button type="button">
Recipes
</button>
</div>
</div>
</div>
<div class="left_side_second_page">
</div>
<div class="right_side">
<div class="right_side_img">
</div>
</div>
</div>
<script src="../myjs/mainpage.js"></script>
</body>
</html>