Sibling Selector Style Change on Hover

Developer
Alex Bergin
Size
3,087 Kb
Views
44,528
  1. Sibling Selector Style Change on Hover Previews
  2. Sibling Selector Style Change on Hover HTML Codes
  3. Sibling Selector Style Change on Hover CSS Codes

How do I make an sibling selector style change on hover?

Can simulate a background color change/other effect by using a sibling element. What is a sibling selector style change on hover? How do you make a sibling selector style change on hover? This script and codes were developed by Alex Bergin on 13 June 2022, Monday.

Sibling Selector Style Change on Hover Previews
IQ Test

Sibling Selector Style Change on Hover - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sibling Selector Style Change on Hover</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .transition, html .overlay, html .menu-button, html .menu-button:before, html .menu-button:after { -moz-transition: all 0.3s cubic-bezier(0.46, 0.01, 0.2, 1.51); -o-transition: all 0.3s cubic-bezier(0.46, 0.01, 0.2, 1.51); -webkit-transition: all 0.3s cubic-bezier(0.46, 0.01, 0.2, 1.51); transition: all 0.3s cubic-bezier(0.46, 0.01, 0.2, 1.51);
}
html .overlay { position: absolute; background-color: #1eb4f5; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;
}
html .menu-button { position: absolute; z-index: 2; top: 50%; left: 50%; width: 60px; height: 60px; background-color: #fdfeff; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); cursor: pointer;
}
html .menu-button:before, html .menu-button:after { content: ""; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); position: absolute; width: 30px; height: 3px; background-color: #1eb4f5; top: 50%; left: 50%; margin-left: -15px; margin-top: -1px;
}
html .menu-button:before { box-shadow: 0 10px 0 0 #1eb4f5;
}
html .menu-button:after { margin-top: -11px;
}
html .menu-button:hover { border-radius: 50%;
}
html .menu-button:hover + .overlay { background-color: #ff6e73;
}
html .menu-button:hover:before, html .menu-button:hover:after { background-color: #ff6e73;
}
html .menu-button:hover:before { box-shadow: 0 0 0 0 #ff6e73; -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg);
}
html .menu-button:hover:after { margin-top: -1px; -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -webkit-transform: rotate(225deg); transform: rotate(225deg);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="menu-button"></div>
<div class="overlay"></div>
</body>
</html>

Sibling Selector Style Change on Hover - Script Codes CSS Codes

.transition, html .overlay, html .menu-button, html .menu-button:before, html .menu-button:after { -moz-transition: all 0.3s cubic-bezier(0.46, 0.01, 0.2, 1.51); -o-transition: all 0.3s cubic-bezier(0.46, 0.01, 0.2, 1.51); -webkit-transition: all 0.3s cubic-bezier(0.46, 0.01, 0.2, 1.51); transition: all 0.3s cubic-bezier(0.46, 0.01, 0.2, 1.51);
}
html .overlay { position: absolute; background-color: #1eb4f5; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;
}
html .menu-button { position: absolute; z-index: 2; top: 50%; left: 50%; width: 60px; height: 60px; background-color: #fdfeff; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); cursor: pointer;
}
html .menu-button:before, html .menu-button:after { content: ""; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); position: absolute; width: 30px; height: 3px; background-color: #1eb4f5; top: 50%; left: 50%; margin-left: -15px; margin-top: -1px;
}
html .menu-button:before { box-shadow: 0 10px 0 0 #1eb4f5;
}
html .menu-button:after { margin-top: -11px;
}
html .menu-button:hover { border-radius: 50%;
}
html .menu-button:hover + .overlay { background-color: #ff6e73;
}
html .menu-button:hover:before, html .menu-button:hover:after { background-color: #ff6e73;
}
html .menu-button:hover:before { box-shadow: 0 0 0 0 #ff6e73; -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg);
}
html .menu-button:hover:after { margin-top: -1px; -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -webkit-transform: rotate(225deg); transform: rotate(225deg);
}
Sibling Selector Style Change on Hover - Script Codes
Sibling Selector Style Change on Hover - Script Codes
Home Page Home
Developer Alex Bergin
Username abergin
Uploaded June 13, 2022
Rating 4.5
Size 3,087 Kb
Views 44,528
Do you need developer help for Sibling Selector Style Change on Hover?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alex Bergin (abergin) Script Codes
Name
Singing Text To Speech
Hsl text shadow generator
Baymax
Using Pseudo Elements for Input Styling
Fancy Text Inputs
Activate on Scroll
B - Bicycle
3D Accelerometer Ball Pit
Show Nav On Scroll
SASS Placeholder Style Mixin
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!