Button states on Groups


(Maria Cerezo) #1

Hi team.
It is possible to work with button states with a GROUP?
I have a group with two elements: text + rectangle. I just want to work with that group:

  • normal state: 0% opacity.
  • hover state: 100%.

I know I can do it with the elements separately, but I want to work with “button states” with this group.
Is that possible?

Thanks in advance!


#2

short answer: nope!

long answer: If you use javascript you can create a mouseover mouse out event using the group element (assigning it an id and using that to attach an event listener).


(Mark Hunte) #3

I actually need to do something like this yesterday.

Because I had more than one button group, I used a class name on the elements within the individual groups I wanted to animate.

I then assigned the mouse over, mouse out to a javascript in the inspector.

The javascript code then looks for the elements for the calling group element and runs the rest of code to it…

var button  = element.querySelector(".buttonText")
	
	  
	
	if (event.type === 'mouseover'){
	
	button.style.opacity = "100"
	
	return;
	}
	
	
	if (event.type === 'mouseout'){
	
	button.style.opacity= "0"
	
	return;
	}

groupButtons.hype.zip (13.6 KB)


(Maria Cerezo) #4

Hey! Thank you guys! :slight_smile: