two section button

[yanith]

Hello guys,

Brand new to the forum and rusty with my CSS. I haven’t used CSS in at least two years, but at the moment I’m making a prototype with a two section button.

Think about it this way,

a big DIV, when you hover over it, two icons appear on each side.

When you hover on the right side, the right icon gets brighter while the left icon dims.
When you hover on the left side, the left icon gets brighter while the right icon dims.

I was trying to use the + and ~ selectors to select the icon1 and icon2 IDs but for some reason is not all the way

i can select the first icon and update the second icon using ~

however, i cannot select the second icon and update the first

I made a small code pen http://codepen.io/yanith/pen/ALoaJq

hope this helps, I feel i might be missing something very simple but can’t figure it out

[Beverleyh]

however, i cannot select the second icon and update the first

You can’t do that with CSS because there isn’t a selector that looks backward to target elements earlier in the DOM. CSS selectors can only look forwards.

Maybe you could use a semi-transparent pseudo element on the 2nd button that’s positioned over the first to give the illusion that the first is being faded? Or use JavaScript to target the first button.

I’m on mobile so can’t demo anything but at least that gives you a few ideas to play with.

[Author]

Posts