Streaming live at 10am (PST)

Adjacent Sibling Selector


#1

Hi everyone. I'm trying to make a div affect the other in Webflow without exporting. So lets say I hover DIV1, then DIV2 changes color. This possible in Webflow? Here is an example...http://jsfiddle.net/6BfR6/968/
All CSS btw.


Link Blocks - how to get hover behavior effect everything in block?
Adjacent Sibling Selector Review
#2

You could try with custom code in dashboard (the style part) or embed html in the editor. You could also try jQuery which is a very nice and easy to use thing smile There were already few topics about how to do what you want in jQuery.


#3

bartekkustra,
I was hoping you would answer. smile
Ok. I'll try the dashboard. Essentially this would introduce it as an inline css in the body, correct?
As far as jQuery is concerned, yes, but I've been having lots of trouble in getting it to work on Webflow. I'm a little confused on how to preview it, and given the documentation I'm not sure I'm looking at the correct or updated post. Have a refresher screencast or tips on making it work? Is jQuery already imbeded as a script in the header of Webflow? Do I still have to use the 'page-nav" on classes and ids?
Thanks man!


#4

Hi @Jonas76-

There's no way to do that currently in Webflow without any custom code -- but it can certainly be done pretty easily if you're a little familiar with writing your own CSS (which you seem to be).

Here's how I would do it:

  1. Create your divs with Webflow elements (probably Blocks).
  2. Select each div, go to the Settings panel in the right sidebar, and give them ids.
  3. Add an Embed element with your custom CSS:

<style>
#div1:hover + #div2{
  background-color: blue;
  -webkit-transform: rotate(60deg);
}
</style>

And it should work for you!

-Kyle


#5

Some screenshots:



#6

You can also add it to the custom code in your settings without using an embed.


#7

You guys are awesome. Thanks for getting back to me on this! It works amazing.


#8