Good day everyone, i have been trying to apply box-shadow property to a webpage but if i apply the effect to the normal state, everything works fine but on the hover state, if i hover on the child, it applies to both the parent and the child.
Normal state: everything works fine
hover state: property applies to each element in the div
I have tried using Jquery to toggle the state but it does not work.
HTML
<div class="results">
<div class="result_wrapper">
<div class="result">
<h2 class="single"><font size="4dp">A title</font></h2>
<div class="single">shortDiscription</div>
</div>
</div>
</div>
CSS
.result {
background-color: #fff0f0;
padding: 5px;
margin: 1%;
width: 600px;
box-shadow: 2px 2px 5px grey;
transition: all 0.5s ease;
}
.myClmass :hover {
display: block;
box-shadow: 2px 2px 5px grey;
transition: all 0.5s ease;
}
.singleHover {
all: revert;
}
.results {
float: left;
}
.vid {
float: right;
margin: 1%;
}
.vidHeader {
background-color: #d69797;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 400px;
padding-left: 5%;
text-align: center;
}
This is my java servlet code:
out.println("<div class=\"results\">");
for(Element post : results){
String link = post.childNode(0).childNode(0).absUrl("href");
String title = post.getElementsByTag("a").text();
String shortDiscription = post.getElementsByClass("b_caption").get(0).child(1).toString();
out.println("<div class=\"result_wrapper\" >");
out.println("<div class=\"result\">");
out.println("<h2 class=\"single\"><font size=\"4dp\">"+title+"</font></h2>");
out.println("<div class=\"single\">"+shortDiscription+"</div>");
out.println("</div></div>");
}
out.println("</div>");
The selector .myClmass :hover means that the rule is applied to all descendant elements of the element with the class myClmass where the mouse is actually over. So your rule is applied to all elements that are within the element with the class myClmass
If you want to apply the box shadow to the element with the class myClmass then the selector has to be .myClmass:hover without the space between .myClmass and :hover
Try pointer-events:none; on your child element in your css
Related
I'm a beginner, i searched a lot for an answer on the internet but none of them managed to clarify why the transition doesn't work.
HTML:
<li><i class="material-icons menu-bar" id="menu-bar">menu</i></li>
<ul class="menu-bar-content hide" id="menu-bar-content">
This is my Js :
const menuBar = document.getElementById('menu-bar');
const menuBarContent = document.getElementById('menu-bar-content');
var menuOpen = false;
menuBar.addEventListener('click' , menuBarBtn)
function menuBarBtn() {
if ( menuOpen == false) {
menuBar.innerHTML = '<li><i class="material-icons undo-icon">undo</i></li>';
menuBarContent.className = 'menu-bar-content';
menuOpen = true;
}
else {
menuBar.innerHTML = '<li><i class="material-icons menu-bar" id="menu-bar">menu</i></li>';
menuBarContent.className = 'menu-bar-content hide'
menuOpen = false;
}
};
And this is my Css:
.menu-bar {
display: inline-block;
vertical-align: middle;
float: right;
color: white;
margin: -1.45% 0.7%;
font-size: 23px !important;
transition: .4s;
}
.undo-icon {
display: inline-block;
vertical-align: middle;
float: right;
color: #1ec7b9;
margin: 0.9% 3%;
transform: rotateZ(43.2deg);
font-size: 14px !important;
border: 2px solid rgb(255, 255, 255);
border-radius: 70%;
padding: 1.5px;
transition: .4s;
}
After the icons switch with each other, i wanted to do it with a transition effect. Thank you in advance!
The transition is not happening because the element is completely removed/replaced with another onclick.
It is CSS properties that transition and the browser thinks it's got a completely new element, not one that is to be transitioned in some way.
What we do is have both li elements in the document all the time, but one of them will be hidden. To do this gradually we can use opacity: 0 alongside the rotation in a new class which is called faded here.
On a click we don't replace the li elements but we set the one that has not been clicked to have class faded - it will rotate and end up invisible with opacity: 0 and we remove the class faded from the other li element so it will rotate back to normal and with normal opacity.
Javascript has a handy function, toggle, for adding and removing a class so we don't have to remember which element is hidden and which is in view - having or not having class faded is enough.
Here is the snippet. Note, the body has been given a background-color just so we can see the white menu and the white border. Also I do not have access to whatever icons you are using so the i elements are replaced with spans just for this demo.
const menuBar = document.getElementById('menu-bar');
const undoBar = document.getElementById('undo-bar');
menuBar.addEventListener('click' , menuBarBtn);
undoBar.addEventListener('click' , menuBarBtn);
function menuBarBtn() {
menuBar.classList.toggle('faded');
undoBar.classList.toggle('faded');
};
body {
background-color: gray; /* just for this test so we can see the white menu */
}
.menu-bar {
display: inline-block;
vertical-align: middle;
float: right;
color: white;
margin: -1.45% 0.7%;
font-size: 23px !important;
transition: .4s;
}
.undo-icon {
display: inline-block;
vertical-align: middle;
float: right;
color: #1ec7b9;
margin: 0.9% 3%;
font-size: 14px !important;
border: 2px solid rgb(255, 255, 255);
border-radius: 70%;
padding: 1.5px;
transition: .4s;
}
.faded { /* added this so when an element has class="faded" it cannot be seen and it is rotated */
opacity: 0;
transform: rotateZ(43.2deg);
}
<ul class="menu-bar-content" id="menu-bar-content" style="margin-top:30px;"> <!-- added just for this tesmargin t so we could see the white menu word in the snippet -->
<li><span class="menu-bar" id="menu-bar">menu</span></li> <!-- remember to put back the <i icon calls in here in place of the spans -->
<li><span class="menu-bar undo-icon faded" id="undo-bar">undo</span></li> <!-- ...and we start this off as faded so it isn't seen to begin with -->
</ul>
I have this css transition, I want to make disappear a div right to left and that the width is reduced little by little:
.disapear {
transition: width 1s ease-in;
width: 0px;
}
.img-thumb {
position: relative;
display: inline-block;
margin: 0 1em 1.5em 0;
border: 1px solid #bbb;
font-size: 12px;
cursor: pointer;
}
the effect is not animated, and the element disappears abruptly
this is my html:
<div class="img-thumb">
<img src="myimage.jpg">
</div>
the class .disapear is added after clicking on the element
what would be the right way to do it?
As your element is inline-block, I would animate the max width. js below is just to add your disapear class (you haven't shown how it gets added)
.img-thumb {
position: relative;
display: inline-block;
margin: 0 1em 1.5em 0;
border: 1px solid #bbb;
font-size: 12px;
cursor: pointer;
transition: max-width 1s ease-in;
overflow:hidden; /* add these 2 */
max-width:100%; /* may want to change this to be width of your image to remove the delay from the beggining of the animation */
}
.disapear { /* this needs to appear after the above style */
max-width: 0px;
border: 0; /* hide border */
}
<div class="img-thumb" onclick="this.classList = 'img-thumb disapear';">
<img src="http://via.placeholder.com/100x100">
</div>
It has been a while since I last used CSS. I'm having trouble with this one. I have a list of items. When I click on the cross it removes the item from the DOM. However what I'm looking for is to make the rest of the items slide up when one has been removed.
Currently it just removes the item as desired but instantly moves the other to 'fill in the space'. I know there is a way to do it with CSS transitions, but the question is how...
var remove = function(id) {
document.querySelector('#'+id).remove();
}
div {
border: 1px solid grey;
width: 100px;
margin: auto;
margin-bottom: 10px;
text-align: center;
padding: 10px
}
span {
float: right;
cursor: pointer;
}
<div id="one">One <span onclick="remove('one')">×</span></div>
<div id="two">Two <span onclick="remove('two')">×</span></div>
<div id="three">Three <span onclick="remove('three')">×</span></div>
<div id="four">Four <span onclick="remove('four')">×</span></div>
Like this?
I added a class called closeSlide which will animate the element to slide up. And after the transition, it is removed by setting up a timer.
And for visual prettiness, I've added overflow:hidden to your target style, which can alternatively, be added via JS using elem.style.overflow = 'hidden'. But for justification, I added that to the target style because I want to avoid any possible jitters when initiating the closing animation.
var remove = function(id) {
var elem = document.querySelector('#'+id);
elem.className += 'closeSlide';
setTimeout(function(){
elem.remove();
}, 200);
}
div {
border: 1px solid grey;
width: 100px;
margin: auto;
margin-bottom: 10px;
text-align: center;
padding: 10px;
overflow:hidden;
}
span {
float: right;
cursor: pointer;
}
.closeSlide {
margin-bottom:0;
height:0px;
padding-top:0;
padding-bottom:0;
transition: 0.2s all ease-out;
/*Just reverse any spacing styling you've applied to make it **magically** disappear*/
}
<div id="one">One <span onclick="remove('one')">×</span></div>
<div id="two">Two <span onclick="remove('two')">×</span></div>
<div id="three">Three <span onclick="remove('three')">×</span></div>
<div id="four">Four <span onclick="remove('four')">×</span></div>
So if I increase the top margin on #featured, it pulls the height from header down with it. What am I doing wrong?
example. if I change #featured {margin:0 auto} to #featured {margin:20px auto}, the white of the header will go down with 20 px, and then show featured. What I want is that #featured gets pulled down 20px and a grey 'border' remains between featured and header
site: http://e2-repair.be/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
header {
height: 100px;
}
header #header-cont {
width: 1000px;
margin: 0 auto;
height: 100px;
font-family: 'Sofadi One', cursive;
}
header img {
height: 80px;
width: 80px;
float:left;
margin-top:10px;
}
header h1 {
font-size:32px;
float:left;
height:100px;
line-height:100px;
}
header nav{
float: right;
}
header nav ul {
list-style: none;
display: block;
height:100px;
}
header ul li {
display: inline-block;
padding: 0 50px;
}
header ul li a{
text-decoration: none;
color: #990000;
display: block;
height: 100px;
line-height: 100px;
border-top: 3px solid;
border-color: #FFF;
-webkit-transition: border-color .1s linear;
-moz-transition: border-color .1s linear;
-o-transition: border-color .1s linear;
transition: border-color .1s linear;
}
nav ul li a:hover {
border-color: #990000;
}
header a:hover, header a:visited, header a:active {
color: #333;
text-decoration: none;
outline: 0;
}
#content-1 {
height: 400px;
background-color: grey;
}
#featured {
position:relative;
height: 350px;
width: 1000px;
margin: 0 auto;
border:2px solid;
border-radius:5px;
border-color:white;
}
html:
<header>
<div id="header-cont">
<img src="logo.png" alt="Logo" />
<h1>E2 Repair</h1>
<nav>
<ul>
<li>Smartphones</li>
<li>Tablets</li>
<li>Laptops</li>
<li>Desktops</li>
</ul>
</nav>
</div>
</header>
<div id="content-1">
<div id="featured">
fewfwe
</div>
</div>
Add a padding-top inside your #content-1 container instead of adding a margin to its child.
Alternatively, you can add an overflow: auto to the #content-1 contaner, and then the margins applied to its child #featured will work.
The reason why this works like this is due to the fact that two elements margins will join together (collapse) when adjacent. So, the margin applied to the child elements gets really joined with the parent one. This, unless the margins don't touch eachother (which happens if you use a padding): infact, you could as well use:
#content-1 { padding: 1px; }
#featured { margin: 19px auto; }
As long as they are not touching eachother, they will not collapse, so the child element maintains its own margin. From the specs:
The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.
Source
The overflow: auto has the effect of not making borders collapse (from the above page):
Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.
You should use padding-top, apply it to content-1 container. Padding will be applied inside the container, however margin will only be applied outside the container. I suggest you to read some articles online for better understanding.
http://html.net/tutorials/css/lesson10.php
I'm fighting with (yet-another) IE8 bug.
Basically, I have a small square container, with an arrow inside built with the :before and :after pseudoelements. The HTML goes something like this:
<div class="container">
<div class="arrow" />
</div>
And the CSS for that is
.container {
height: 58px;
width: 58px;
background-color: #2a5a2a;
}
.arrow {
padding-top: 7px;
}
.arrow:before {
margin: 0 auto;
content: '';
width: 0;
border-left: 12px transparent solid;
border-right: 12px transparent solid;
border-bottom: 13px gray solid;
display: block;
}
.arrow:after {
margin: 0 auto;
content: '';
width: 12px;
background-color: gray;
height: 14px;
display: block;
}
Now, I want the arrow inside it to change color when I hover over the container. I added this CSS:
.container:hover .arrow:after {
background-color: white;
}
.container:hover .arrow:before {
border-bottom-color: white;
}
And that's where the problem begins. That works on most browsers, but on IE8 the background-color property is not overridden. So I get only the tip of the arrow with the new color, but not the square that makes the "body" of it.
To make things more interesting, if I add the following to also change the container background-color to something slightly different, then everything starts to work and the background-color for the arrow changes!
.container:hover {
background-color: #2a5a2b;
}
If I only set the :hover status for the container, and I set THE SAME background color that it already had, then IT DOESN'T WORK. I have to change it if I want the background-color to change.
Here's a jsfiddle if you want to try it: http://jsfiddle.net/Ke2S6/ Right now it has the same background color for the container on hover, so it won't work on IE8. Change one single digit and it'll start working.
So... any ideas?