I am simply changing changing the color and background-color of a button when I click on it.
<input type="button" value="click me" id="myButton" onclick="ChangeColor()"/>
The CSS of this button contains CSS transition for the color and background-color, however, on the :hover pseudo-element I didn't add any styles, I didn't change the color.
#myButton{
color:#3399FF;
background-color:#FFFFFF;
/* These transitions are supposed to change the color in case I hover over the button */
-webkit-transition: background 0.5s,color 0.5s;
-moz-transition: background 0.5s,color 0.5s;
transition: background 0.5s,color 0.5s;
}
#myButton:hover{
/* But since there's nothing here, the color won't change when I hover */
}
Now, when I change the styles via JavaScript, they change while using the transitions, means, the colors will change after 0.5s, and not instantly.
function ChangeColor()
{
document.getElementById("myButton").style.color = "#FFFFFF";
document.getElementById("myButton").style.backgroundColor = "#3399FF";
}
This is a really good thing, and I like it, but I'm just wondering, how does JavaScript respect CSS3 transitions? Is there any documentation for this?
Your transitions are applied whenever the value of the property is changed. It doesn't matter whether you change it on hover, focus, resize (with a media query for example), click or any other event via JavaScript.
In general, you have a transition between two states of the element. You first define the initial state:
#myButton {
color: #39f;
background: #fff;
transition: .5s;
}
When you change the value of either of those two properties (and it doesn't matter whether you do this using the :hover pseudo-class or JavaScript), your element will go into another state and you are going to have a transition between the values of the properties from the initial state and those from this new state.
The method you're using to change the style with JavaScript is essentially a way of manually changing the style attribute directly on the element itself. Any time the style changes to something else and you have a transition defined for it, that transition will activate to change to the new style. That includes changes that JavaScript makes to the styles.
Related
So we have this button :
<button type="button" class="btn">
This goes somewhere
<i class="fa fas-arrow-right"></i>
</button>
I want to rotate the icon 90deg so it will be a down arrow on hover and the problems I have are these :
-When using css hover and rotate the problem is you have to hover the icon and I want the arrow to rotate 90deg when hovering the button and I don't known if you can make the hover happen on the icon when hovering the button and even so when hovering the icon it rotates to 90deg but then goes back to initial position and I want it to stay as long as you are hovering the button.
I have tried with javascript and it works just fine with mouseover and mouseout to add and remove a class with tranform rotate 90deg but the problem is I can't figuer out how to make the animation happen faster, with javascript it happens really slow, what I mean by slow is that on hover the button changes colors and the color changes but the arrow only turns down after like 2-3s.
So my question is can you control the animation to be faster with javascript? Can you do it with css when hovering the button and make it stay at 90deg and only go back to initial position once you hover out?
You can use
.btn:hover > i {
display: inline-block;
transition: 1.5s ease-in-out;
transform: rotate(180deg);
}
You need to display inline-block if you want the i tag to rotate. I might also suggest using span tags instead of i tags for font awesome icons since span's have less semantic meaning where i tag is reserved for italics. Also you can edit the speed and change the animation type by editing the transition code if you want.
You don't need Javascript to achieve that.
With the :hover selector you can apply css properties when the user hover the button.
You can set the velocity changing the ms/s on the transition property.
.btn:hover i {
transition: all 300ms;
transform: rotate(90deg);
}
I have an element whose width increases when another element beside it is hovered over, i.e.
.div2 {
width: 0px;
display: none;
transition: width 2s;
}
.div1:hover ~ .div2 {
width: 100px;
}
I want to change the display to block on mouseover, but before the CSS transition. Then, similarly, I want to change the display back to none after the CSS transition finishes. I tried using .onmouseover to set the display to block, but it set it after the CSS transition.
Is there any way to set the display to block before the CSS transition?
As I understood your question, You can have two classes one for hidden (display :none) and another for visuallyHidden (may be visibility : hidden). On hover use visualy hidden class to get the css transition in effect(take help of JavaScript to add this class). You must take a help of setTimeout here (10 Ms ) should be fine to add another class which actually implements css transition. when it is un hovered you need to recycle logic again. hope it helps
I am looking at this code http://codepen.io/optyler/pen/FgDyr and if you hover to the triangle element, you will see the animation. However instead of hovering it, I want to do it programmaticaly using JavaScript. This is what I have done so far:
document.querySelector('.triangle').classList.add('animateSpeak');
and added a new css class
.animateSpeak {
animation: vibrate .5s infinite ease-out;
}
The animation is working though as you can see here http://imgur.com/a/V9JyO the left part is only animating. Am I doing something wrong here?
Since you're using a CSS 3 animation, you would probably need some sort of active class.
Just change the :hover selectors (line 54) to, say, .active instead. i.e.:
.triangle.active,
.triangle.active:before,
.triangle.active:after {
animation: vibrate .5s infinite ease-out;
}
You can start the animation programmatically by adding the .active class or stop it be removing the class.
To answer your second question, it looks like the :before and :after elements need the animation too.
In your CSS add
.animateSpeak,
.animateSpeak:before,
.animateSpeak:after {
animation: vibrate .5s infinite ease-out;
}
Just a quick thought, you can avoid the intersection of the three becoming darker than their constituents by changing the color from rgba to rgb or a solid color,
$font_color: rgb(231,236,241);
more precisely, I've seen websites where there's a kind of header image, which loops through 3-4 different images, and each image is referenced by a dot, and you can pick the image you want by clicking the dot as well. I'm sure everyone has seen this somewhere.
as an example, go to http://www.tsunamitsolutions.com/
my question is, how do I make these dots appear/disappear when I hover on the image (like on the site I shared above) is it javascript or can this be accomplished just in the CSS with the "hover" style.
In other words, can hovering over one html portion/div/section make another div/section appear/disappear just by using CSS?
It can be done in the CSS.
Assuming the dots/arrows are child elements of banner container, you can do something like:
.bannerContainerClass .dotClass {
display: none;
}
.bannerContainerClass:hover .dotClass {
display: block;
}
You can also do it in jQuery if you need effects like fade:
$(".bannerContainerClass").hover(function() {
$(this).children(".dotClass").fadeIn(500);
}, function() {
$(this).children(".dotClass").fadeOut(500);
});
The jQuery method can be modified to work even if the dots aren't children of banner container.
You can accomplish it using Jquery and javascript. As in any website header images there is a tag for image one tag for collection of those points.
Suppose.
<div id="header_image">
..code for header image..
</div>
which is header tag. and there is a tag which cointains the points.
<div id="points_container">
..code for points...
</div>
Now in its javascript code if you want to disappear "points_container" tag when mouse is hovered over "header_image".and appears again when mouse is hovered out, you can write in its Javascript code.
$(document).ready(function(){
$("#header_image").hover(function(){
$("#points_container").hide();
},function(){
$("points_container").show();
});
});
You can use css on hover with either the visibility attribute or opacity attribute to hide an object, the full implementation of a gallery widget like this is somewhat more complicated though. CSS solution:
.dots:hover
{
opacity:0;
}
Makes anything with the dots class invisible on mouse over.
Or if you don't want it to take up any space when invisible:
.dots:hover
{
display:none;
}
Try this with simple CSS transitions, like this
HTML
<div id="parent"><br/><span class="bullets">* * * *</span></div>
CSS
.bullets{
opacity:1;
}
#parent:hover > .bullets{
opacity:0;
transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
}
FIDDLE HERE>>
I would like to be able to hover over an image and only the background itself to turn black (with opacity to control how much). I already have have an effect for the image itself when it's on hover, but I would like to add an effect where the background which is white to turn to a darker color. Being able to manipulate it later on with opacity and transition would be best, but I have not been able to find css3 or jquery code that works for this so far to get me to that point. Any help would be appreciated.
html
<div class="template_design2" style="margin-top:100px; margin-left:5px;"></div>
css
.template_design2 {
background-image:url(img/template_design2.jpg);
width:740px;
height:280px;
background-repeat:no-repeat;
float:left;
}
.template_design2:hover {
background-position:0 -280px;
}
You need to add a class to your <a>s that contain the background images, so you can target them.
You use .template_design:hover, so to target the first one (since it has no class, but you can use its ID to test it works quickly, then assign all <a>s inside .template_design a class so you can target them all at the same time):
.template_design:hover a#zapzonePoster { opacity: 0.5; }
Here's a fiddle showing how it works:
http://jsfiddle.net/v6aNY/
So once you know that's working, you could then assign a class so it would be more like:
.template_design:hover a.thumbnail { opacity: 0.5; }
... which will target all of them, so you only need one rule to govern it, instead of many.
Here's the same fiddle updated with a class of .thumbnail:
http://jsfiddle.net/v6aNY/1/