Any idea why this isn't working? The default style in CSS is opacity = 0. Not only does the opacity not change in the div I want to appear, but when the mouse goes over the link it doesn't even show it as being a link. (it works well when I use "visibility" instead of the opacity property, but it causes blinking due to the action triggering the "onmouseout" event)
<a href="#" onMouseOver=" document.getElementById('pop_up1').style.opacity = 1" onMouseOut="document.getElementById('pop_up1').style.opacity = 0">
Here's the CSS:
#pop_up1 {
opacity: 0;
position:fixed;
width: 100%;
height: 100%;
z-index: 2;
text-align: center;
}
Oh wait, I think I see the problem. Even though the #pop_up1 div is invisible it is still over all the links and thus nothing is registered by the mouse at all. Is there a way to solve this problem?
"Oh wait, I think I see the problem. Even though the #pop_up1 div is
invisible it is still over all the links and thus nothing is
registered by the mouse at all. Is there a way to solve this problem?"
-- use display:none instead of opacity to hide it, like
#pop_up1 {
display:none;
position:fixed;
width: 100%;
height: 100%;
z-index: 2;
text-align: center;
}
Related
In the React app I'm building, I would like a button to be hidden until certain conditions are met. Then I'd to animate it in from underneath another element.
At the moment I am always rendering the button and adding a class of "hidden" when I'd like it hidden.
The SASS looking something like this:
button {
display: inline-block;
width: 100%;
height: 63px;
transition: height 250ms ease-in-out;
font-size: 24px;
&.hidden {
height: 0;
}
}
But when the button hides, the element gets smaller, but the text is still visible. Similar to this: https://jsfiddle.net/dtu56e1j/
What am I doing wrong?
Or is there a better way to get a button to animate in?
IMO the other answers provide working, but complicated solutions to your problem. Simply put, you're missing a single CSS property - overflow: hidden.
I created this StackBlitz to illustrate the point.
However, the only modification necessary to the original code is this:
button {
overflow: hidden;
[...]
}
Fiddle to better match use-case: https://jsfiddle.net/smn6xgv2/
Because the button element has some internal padding, setting height: 0 doesn't completely remove the element from the display. To address that issue, we wrap the button inside a div and then animate the height of the div.
Additionally, the div should be left with the default display: block. In the original example, the display: inline-block causes the browser to reserve a minimum height of line-height. More info in this SO question
With a little work you could use translateY to get this done nicely
const el = document.querySelector("#testButton");
setInterval(() => {
el.classList.toggle("hidden");
}, 2000);
button {
display: inline-block;
background-color: darkblue;
color: white;
width: 100%;
height: 63px;
transition: transform 250ms ease-in-out;
font-size: 24px;
}
button.hidden {
transform: translateY(63px); /* or -63px to invert */
}
/* Make a wrapper class so that your button disappears on transform */
.wrapper {
height: 63px;
overflow: hidden;
}
<div class="wrapper">
<button id="testButton">My Button!</button>
</div>
I can see from console.logs that the variable is updating every second. But the {{variable}} in the HTML isn't. If I select the text it updates, or if the container div is animated the variable updates.
In the .ts I have a
ngOnInit() {
this.ref.detectChanges();
}
and I tried calling this.ref.detectChanges() every second when I update the variable.
All of the {{}} are not being updated until something else happens. A *ngIf displays something, or a CSS animation is triggered. No errors in the console.
CSS animation for the drawer :
.moveOutProductDrawer{
left: -250px;
animation: scootch 0.3s forwards;
}
#keyframes scootch {
100% { left: -250px !important; }
}
And in another part of the .ts I'm changing the height and width directly.
Has anyone experienced this before? Does the presence of CSS animation mess with Angular?
For some reason, when I change how the window is positioned into the center of the screen, everything is back to normal.
.bigFlexcontainer{
/* display: flex;
align-items: center;
justify-content: center; */
position: relative;
width: 100%;
height: 100%;
}
with position relative and no more flex, the variables are updating correctly and all is well. Probably shouldn't matter, but in this case it solved the problem.
I have a simple question over CSS's relative-absolute relationship.
Here's simple example.
HTML:
<div class="relative">
relative area
<div class="absolute">I am relative area's son. Hover over me! my bg-color changes!</div>
</div>
CSS:
.absolute {
width: 140px;
height: 140px;
background-color:tomato;
position: absolute;
left: 120%;
top: 0;
}
.relative {
position: relative;
border: 2px solid #000;
width: 200px;
height: 200px;
margin-top: 200px;
}
.relative:hover .absolute {
background-color: yellowgreen;
}
https://codepen.io/nori2tae/pen/ZXgMjZ
When I hover over .absolute its background color changes.
This shows that though it is visually detached from parent area(.relative), as long as a child element(.absolute) semantically belongs to its parent, browser thinks mouse pointer is also on .absolute, right?
Therefore hover over .absolute also means .relative:hover?
And is this so called hoisting?
Someone pls clear the fog over my head.
It might be "visually" detached but to the browser DOM parser still sees your page a bunch of HTML tag. Since the CSS did not change the DOM model the Browser still thinks the absolutely positioned element is still inside its parent element.
Now since browser is responsible for handle such mouse events you get the mentioned behavior.
Its called trickling or capturing.. (different terms for the same thing)
Hoisting is a different concept in javascript (Eg. function and variable declarations are moved to the top during compilation
.relative:hover .absolute {
background-color: yellowgreen;
}
I understand your css like so: When hover on .relative, make its child .absolute change background. And it does just that (because .absolute is the child of .relative). I don't see what's wrong here?
The reason you hover over .absolute and still get the background change is because in fact you're hovering over .relative.
I have a problem regarding CSS3's transitioning. As seen in the snippet of my CSS file below, I have made a footer slide up whenever it is toggled active (I do this using jQuery).
Whenever it becomes active, it pushes the content of the website upwards until it finishes its transition, at which point the content slides back down. It looks like the page expands, but this should not happen because of the position attribute. Why is this happening?
Thanks in advance for any help.
.footer {
height: 130px;
width: 100%;
position: absolute;
bottom: -130px;
background-color: #333;
transition: bottom 250ms ease-out;
}
.footer-active {
bottom: 0;
}
I found a solution to the problem. It seems whenever the element moves, the window will automatically scroll to the element's position. I fixed the problem by inserting overflow: hidden into the html's and body's CSS rule.
I am talking about this example (badAdviceGuy created it for me):
Grid css transition
.wrapper {
width: 300px;
}
li {
display: inline-block;
height: 40px;
width: 40px;
position: relative;
padding: 3px;
}
a {
display: block;
height: 40px;
width: 40px;
background: lightblue;
position: absolute;
-webkit-transition: .3s;
transition: .3s;
}
a:hover {
-webkit-transform: scale(2,2);
transform: scale(2,2);
z-index: 100;
background: lightgreen;
}
When I hover fast over the grid elements, the zoom effect abruptly stops, as soon as I'm out of the element. Well actually I read it does not stops, but reverts immediately when mouse is out again:
Starting and Reversing a Transition:
In general when a transition starts it must complete according to the transitionproperties set even if those properties are changed by another action. However at times it doesn’t make sense to do this.
A common case is mousing over an element that starts a transition and then quickly mousing out. The rule above says the :hover transition has to complete before transitioning back to it’s initial value, however this doesn’t match expected behavior.
Expected behavior is that on mouse out the original transition stops and immediately moves in reverse. This is what the spec calls for.
You can read the technical explanation about how this is accomplished, but the gist is that whatever part of the transition has happened up to the point where the mouse-out occurred now happens in reverse.
You don’t have to do anything to make this happen either. It’s all automatic.
My problem is that I do not want that.
I used to have a Javascript which does a fine full transition till finished, so I could swipe over all the grid, and single tiles move slowly out, and continue when I'm out of the tile area.
Would there be a easy and straight forward way to accomplish such in css?