Hi, I´m trying to make to divs from different classes change each others width. If I hover A i´ll change B´s width, and if I hover B i´ll change A´s width.
I make it work the first way ( hover A) but for some reason I don´t know, because I´m new to css, nothing happens to A when I hover B.
Good job. That looks good.
I'm no wordpress pro. Honestly, I would just add it to the footer.php, but I'm sure someone is going to tell me I'm wrong with that one.
I'm in the office right now, but I can look into the ie stuff when I get home if someone else hasn't solved that for you.
Not a problem, by the way.
FYI. there is a good chance that Wordpress is already loading a jQuery js for you, so make sure you don't double load it.
This is very interesting.... I have no idea why it wasn't working in jsFiddle, but the exact same code works in codepen... This is odd. I'm curious as to how it will work on a live site. but here is it working in IE in codepen.
Is it not worth managing the animation just in JQuery anyway since it's already in use? Transition/Transform support is non-existant in IE8/9 - so perhaps managing the width and the transition via .animate(); with JQuery might be a viable cross browser solution?
.animate gets a little buggy if you don't use it with .stop. Here is a pretty good way to do it. I'm not jQuery pro so I had to do a little research. How's this?
Hi, I´m trying to make to divs from different classes change each others width. If I hover A i´ll change B´s width, and if I hover B i´ll change A´s width.
I make it work the first way ( hover A) but for some reason I don´t know, because I´m new to css, nothing happens to A when I hover B.
Here it goes
<!DOCTYPE html>
.container{ width:1280px; height:330px; }
.a{ position:relative; float:left; width:300px; height:300px; background:#000; color:#fff; } .a:hover{ width:450px; }
.a:hover ~ .b{ width:150px; }
.b{ position:relative; float:left; width:300px; height:300px; background:#666; color:#fff; }
.b:hover{ width:450px; }
.b:hover ~ .a{ width:150px; }
Thanks
The general sibling selector (~) matches all siblings, but only siblings that follow the target in the markup.
Therefore, b follows a and .a:hover ~ .b finds a match. However, a precedes b, so .b:hover ~ .a has nothing after b to match.
I suspect you will need to use javascript to achieve this effect.
Honestly, I would do this with jQuery. Trying to affect another div get's tough if they aren't nested. You could do:
But that only works if b comes after a. Or do this if they're immediately nested:
Here is a simple js that should be able to manage it for you and it's a good on to know. It uses jQuery. http://jsfiddle.net/kevin11189/GAuzS/1/
http://jsfiddle.net/kevin11189/GAuzS/1/
It can be achieved with classes too. I don't know why I did all ID's on that one. http://jsfiddle.net/kevin11189/RDHnA/
If you can throw what you're trying to do into a jsfiddle or something, I can help you set it up.
I got it. I added some transforms and it works!!!!!!!!!
http://jsfiddle.net/ciro73/CDmFY/9/
Thanks a lot Kevin.
Can I use this function inside wordpress? Where? Why transformation wont work in internet explorer?
Good job. That looks good. I'm no wordpress pro. Honestly, I would just add it to the footer.php, but I'm sure someone is going to tell me I'm wrong with that one. I'm in the office right now, but I can look into the ie stuff when I get home if someone else hasn't solved that for you. Not a problem, by the way. FYI. there is a good chance that Wordpress is already loading a jQuery js for you, so make sure you don't double load it.
This is very interesting.... I have no idea why it wasn't working in jsFiddle, but the exact same code works in codepen... This is odd. I'm curious as to how it will work on a live site. but here is it working in IE in codepen.
http://codepen.io/kevin11189/pen/rzHkG
Only supported in ie10 I guess. I was in different compatibility modes. My mistake.
Is it not worth managing the animation just in JQuery anyway since it's already in use? Transition/Transform support is non-existant in IE8/9 - so perhaps managing the width and the transition via .animate(); with JQuery might be a viable cross browser solution?
How exactly should I use .animate();??????
I have no idea. Can I add .animate() in my existing http://jsfiddle.net/ciro73/CDmFY/9/
.animate gets a little buggy if you don't use it with .stop. Here is a pretty good way to do it. I'm not jQuery pro so I had to do a little research. How's this?
http://jsfiddle.net/kevin11189/CMWNn/