What I want is to hover over my div and give it a box-shadow to show that it is clickable, I have some content and a button inside it which should not have the box shadow. The button enlarges on hover. I managed to get the box-shadow on the div and remove the box-shadow on content by using pointer-events:none but am unable to remove the shadow from the button as it is clickable and cannot use pointer-events:none. Is there any css only solution and if not, any other solution? jsfiddle link->https://jsfiddle.net/uzq13s47/1/
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<link rel="stylesheet" href="./src/styles.css"/>
<body>
<div id="container">
<div id="box">
<p>content</p>
<h5><button>click me!</button></h5>
</div>
</div>
</body>
</html>
body {
font-family: sans-serif;
}
#box {
background-color: cyan;
border-radius: 10px;
height: 200px;
width: 200px;
}
p {
pointer-events: none;
}
#container :hover {
box-shadow: 0 1px 5px rgb(137, 137, 138);
}
h5 :hover {
transform: scale(1.2);
transition-duration: 0.5s;
}
You are not using :hover as you want to, that white space between selector and pseudo class (#container :hover) it means all child element will have the hover effect, in code means (#content *:hover), and that's why you have the p and the button with the hover effect.
You can remove that white space and apply the hover in #box and button only
Also I would advise not using the heading h5 as parent of the button because it isn't much correct in terms of semantics
body {
font-family: sans-serif;
}
.button {
width: 60px;
height: 60px;
}
#box {
background-color: cyan;
border-radius: 10px;
height: 200px;
width: 200px;
}
#box:hover {
box-shadow: 0 1px 5px rgb(137, 137, 138);
}
button:hover {
transform: scale(1.2);
transition-duration: 0.5s;
}
<div id="container">
<div id="box">
<p>content</p>
<button class="button">click me!</button>
</div>
</div>
Related
When mouse hover over the button all of the buttons are moving
body{
padding:0px;
margin:0px;
font-family: Lato,Arial,sans-serif;
font-weight: bold;
font-size: 30px;
background-color: black;
text-transform: uppercase;
}
.container{
width:900px;
height: 30cm;
margin:0 auto;
background-color: black;
}
.nav{
text-align: center;
}
.nav div
{
background-color: white;
display: inline-block;
border: solid;
margin-left: 5px;
margin-right: 5px;
padding: 10px;
border-radius: 0 0 10px 10px;
transition: 0.2s;
}
.nav div:hover
{
padding-top: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav class="container nav">
<div>
Other info
</div>
<div>
main
</div>
<div>
my projects
</div>
</nav>
</body>
</html>
I've expected that only one button will move but it isn't.
I need to write few word here because stackoverflow doesn't let me post this.
Also sorry for my English if its bad.
The buttons are siblings and sensible to changes of each other. If any sibling changes padding-top or padding-bottom, it will affect the others. They have the same parent and to change one button padding-top would change the parent height, affecting all the children (buttons).
Instead, in the hover you can use transform, like this:
.nav div:hover {
transform: translateY(-25px);
}
Transform affects the element individually without changing anything around.
You can do it like this
body{
padding:0px;
margin:0px;
font-family: Lato,Arial,sans-serif;
font-weight: bold;
font-size: 30px;
background-color: black;
text-transform: uppercase;
}
.container{
width:900px;
height: 30cm;
margin:0 auto;
background-color: black;
}
.nav{
text-align: center;
}
.nav div
{
background-color: white;
display: inline-block;
border: solid;
margin-left: 5px;
margin-right: 5px;
padding: 25px 10px 10px;
border-radius: 0 0 10px 10px;
transform: translateY(-25px);
transition: 0.2s;
}
.nav div:hover
{
transform: translateY(-5px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav class="container nav">
<div>
Other info
</div>
<div>
main
</div>
<div>
my projects
</div>
</nav>
</body>
</html>
There is a pure CSS (no JavaScript) dropdown menu activated on hover, and the menu stays open if you click it.
It's here: Making Animated Dropdown Menu by Using Pure CSS Like Bootstrap does
Here's the code:
html, body {
margin:0;
}
.acn-menu {
text-align: center;
background-color: rgba(0, 0, 0, 0.9);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
min-height: 74px;
width: 100%;
}
.label_openclose {
display: none;
}
.menu-tabs {
height: 100%;
}
.menu-tabs .elem {
box-sizing: border-box;
padding: 0 20px;
float: left;
height: 100%;
line-height: 70px;
background-color: rgb(30, 30, 30);
color: white;
}
#-webkit-keyframes spin {
0% {
transform: rotate(-180deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(-180deg);
}
}
#keyframes spin {
0% {
transform: rotate(-180deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(-180deg);
}
}
.menu-check:checked ~ .label_openclose {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.menu-check {
display: none;
}
.menu-tabs .elem:hover {
background-color: rgba(255, 255, 255, 0.2);
}
/*#media screen and (max-width:55%)*/
#media screen and (max-width:768px) {
.label_openclose {
-webkit-animation: spin 2s;
animation: spin 2s;
display: inline-block;
transform: rotate(-180deg);
transition-duration: 1s;
margin: 10px;
width: 30px;
height: 30px;
border-radius: 50%;
border-top: 10px solid rgb(50, 50, 50);
border-right: 10px solid rgb(100, 100, 100);
border-bottom: 10px solid rgb(150, 150, 150);
border-left: 10px solid rgb(200, 200, 200);
background-color: transparent;
cursor: pointer;
}
.label_openclose:hover {
transform: rotate(180deg);
}
.menu-tabs .elem {
transition: border 1s linear, height 1s;
line-height: initial;
float: initial;
height: 0px;
cursor: pointer;
border-top: 0px solid #000;
overflow: hidden;
}
.menu-tabs:hover .elem {
height: 25px;
}
.menu-check:checked ~ .menu-tabs .elem {
height: 25px;
color: white;
border-top: 2px solid rgba(255, 255, 255, 0.2);
}
.label_openclose:hover ~ .menu-tabs .elem {
border-top: 2px solid rgba(255, 255, 255, 0.2);
height: 25px;
}
}
<div class="acn-menu">
<input type="checkbox" id="openclose" class="menu-check" />
<label class="label_openclose" for="openclose"></label>
<div class="menu-tabs">
<div class="elem">test</div>
<div class="elem">nav</div>
<div class="elem">bar</div>
<div class="elem">with</div>
<div class="elem">transitions</div>
</div>
</div>
<main>
test content of main page</br>The navbar menu stays open when you click on the circle</br>and it even opens on hover, not just on click.
</main>
I would put the drop down where it says "Solutions" in the navbar:
How could I make this work with the default bootstrap 3 navbar menu?
The trick is in the :checked and :hover CSS psuedo-class selectors on a checkbox in combination with ~ (the general sibling combinator). The combinator (~) sounds complicated, but it basically just means select any sibling after the ~ if it is present in html after the selector before the ~. For example:
.before ~ .after {
background-color: orange;
}
...
<div>
<p class = "before">Before</p>
<p class = "after">After</p> <!-- I'll be orange -->
<p class = "after">After</p> <!-- Me too! -->
<p class = "after">After</p> <!-- You get the point -->
</div>
So basically all you need is (1) a checkbox element (2) a label for said checkbox, and (3) a menu (with as many children as you want). And all three have to be siblings so that checking / unchecking the checkbox can toggle the classes of the other two elements via the psuedo-class selectors and the ~ combinator.
In the example you showed, the checkbox display is set to none, but that's just because its ugly. It could easily still be there and the menu toggle would function the same. You can toggle the check with the label alone, so it's doesn't really matter. But the invisible checkbox is what makes everything happen. You could style it directly and forget the label if you wanted to.
So all you need to do is set the menu to hidden, and the menu after the ~ combinator to show if the checkbox is either checked or hovered over:
.menu {
display: none;
}
.check-toggle:checked ~ .menu, .check-toggle:hover ~ .menu {
display: block;
}
...
<input id="checkBox" class="check-toggle" type="checkbox"/>
<label for="checkBox">MENU</label>
<div class="menu">
<div>Menu Items</div>
<div>Menu Items</div>
<div>Menu Items</div>
<div>Menu Items</div>
</div>
It might be an absolute pain to find a perfect replica of this in bootstrap, or it might be easy, I'm not sure. But you don't really need it. You can just add the invisible checkbox, the label, and the menu with the toggling selectors, and then style everything else with bootstrap.You might need to over-power the cascade, but worst comes to worst you can make special toggling selectors with an id instead of a class.
Here is a minimalist working example:
<style>
.check-toggle {
/*display: none;*/
}
.menu {
display: none;
position: absolute;
background-color: white;
border: 2px solid black;
margin-top: -2px;
}
.menu:hover {
display: block;
}
.check-toggle:checked ~ label, .check-toggle:hover ~ label {
color: orange;
}
.check-toggle:checked ~ .menu, .check-toggle:hover ~ .menu {
display: block;
}
</style>
<div>
<input id="checkBox" class="check-toggle" type="checkbox"/>
<label for="checkBox">MENU</label>
<div class="menu">
<div>Menu Items</div>
<div>Menu Items</div>
<div>Menu Items</div>
<div>Menu Items</div>
</div>
</div>
You can use :focus for this. Check out the example code.
Drawback: You cannot toggle the dropdown (You can open it but cannot close it).
This question already has an answer here:
why float & inline-block cause different vertical type?
(1 answer)
Closed 1 year ago.
Q. How do I remove the extra space at the bottom of the div#inlineblock? Why is it there?
div {
width: 150px;
padding-top: 5px;
text-align: center;
background-color: #f3f6db;
font-family: "Arial";
}
hr {
border-color: red;
border-width: 1px 0px;
border-style: solid;
transition: width .2s linear;
}
div#inlineblock {
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="block"><span>Block</span>
<hr/>
</div>
<div id="inlineblock"><span>Inline Block</span>
<hr/>
</div>
</body>
</html>
I appreciate good references. :P
Thanks.
So what's happening here is that your <hr /> has a margin (as is normal for <hr /> elements) and it's being treated differently.
In the case of #block, it's being subject to margin collapsing but in #inlineblock it isn't.
You can resolve this by specifying margin-bottom:0 on your hr elements.
div {
width: 150px;
padding-top: 5px;
text-align: center;
background-color: #f3f6db;
font-family: "Arial";
}
hr {
border-color: red;
border-width: 1px 0px;
border-style: solid;
transition: width .2s linear;
margin-bottom: 0; /* NEW */
}
div#inlineblock {
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="block"><span>Block</span>
<hr/>
</div>
<div id="inlineblock"><span>Inline Block</span>
<hr/>
</div>
</body>
</html>
You'll notice this now pushed the two elements together, so you may need to add a margin-bottom to your divs depending on the exact effect you want.
The space at the bottom of #inlineblock is actually the margin of the hr. If you reset that margin, you'll see the 'space' disappear.
div {
width: 150px;
padding-top: 5px;
text-align: center;
background-color: #f3f6db;
font-family: "Arial";
}
hr {
border-color: red;
border-width: 1px 0px;
border-style: solid;
transition: width .2s linear;
}
div#inlineblock {
display: inline-block;
}
#inlineblock hr {
margin:0;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="block"><span>Block</span>
<hr/>
</div>
<div id="inlineblock"><span>Inline Block</span>
<hr/>
</div>
</body>
</html>
margin-bottom(and top) default for hr element is 8px, you must set it to 0px.
#inlineblock hr {
margin-bottom: 0;
}
div {
width: 150px;
padding-top: 5px;
text-align: center;
background-color: #f3f6db;
font-family: "Arial";
}
hr {
border-color: red;
border-width: 1px 0px;
border-style: solid;
transition: width .2s linear;
}
#inlineblock hr {
margin-bottom: 0;
}
div#inlineblock {
display: inline-block;
}
<div id="block"><span>Block</span>
<hr/>
</div>
<div id="inlineblock"><span>Inline Block</span>
<hr/>
</div>
You can also use the following:
div#inlineblock {
margin-top: 0px;
}
I'm looking to make a html button darken in colour when hovered over.
The code I'm using is below:
<div style="width: 200px; color: white; background-color: #bf8f42; opacity: 0.8; margin: auto; margin-top: 0px; padding: 20px;">Training</div>
you can give a class to your div element and add some styling in style tag in tag.
Here is full HTML code for the button with a bit darken on hover
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.btn-training
{
width: 200px;
color: white;
background-color: #bf8f42;
opacity: 0.8;
margin:0 auto;
padding: 20px;
text-align: center;
}
.btn-training:hover
{
background-color: #9f7f31;
}
</style>
</head>
<body>
<div class="btn-training">Training</div>
</body>
</html>
Try out this part of code:
<style>
div:hover{
background-color: #000000;
}
</style>
Try something like this,
div:hover{
background-color: #000000;
opacity:1;
}
This code might help you for changing colors while hovering
<!DOCTYPE html>
<html>
<head>
<style>
input:hover {
background-color: yellow;
}
</style>
</head>
<body>
<input type="button" />
</body>
</html>
Explanation:
When the user hovers over the class (test) it triggers the css element .test:hover. :hover is a anchor pseudo-class. you can use these types of classes in various ways Shown Here.
.test:hover {
background: #000000;
}
<div class="test">text</div>
Try this solution:
.btn-test {
width: 200px;
color: white;
background-color: #bf8f42;
opacity: 0.8;
margin: auto;
margin-top: 0px;
padding: 20px;
}
.btn-test:hover {
background-color: #a26d19;
}
<div class="btn-test">Training</div>
I have three divs in a tag.
<nav>
<div id="home">
<p>Home</p>
</div>
<div id="about">
<p>About Me</p>
</div>
<div id="contact">
<p>Contact</p>
</div>
</nav>
I want to make 3 buttons which changes its opacity to 1 when hovered, but i end up unsuccessful. Firstly, I declared nav's opacity as 0.3, and then set it's opacity to 1 when hovered. But it stays as 0.3 when hovered. I thought :hover pseudo-selectors are more specisic, so they would overwrite the old value, but they didnt. Here is the CSS code:
#home, #about, #contact {
text-align: center;
color: #eedd33;
display: inherit;
padding-top: 0px;
font-family: Tahoma;
border-right: solid 1px black;
height: 50px;
vertical-align: middle;
padding: 10px;
}
#home:hover, #about:hover, #contact:hover {
opacity: 1;
}
nav {
border: solid 2px black;
display: inline-block;
background: orange;
border-radius: 7px;
opacity: 0.3;
}
I can post images indicating my problem if you want it.
The nav's opacity is inherited by the children. Even if their's is 1 they will only show 0.3 opacity. Define the opacity of the children to be 0.3 instead.
Just create a generic class for each of the inner divs or change the CSS selector to something like this:
nav > #home:hover,
nav > #about:hover,
nav > #contact:hover {
opacity: 1;
}
Heres the JSFiddle http://jsfiddle.net/rZgzL/