How to create hover effect like this?

#1

Hello everyone,

I would like to create hover effect for two elements: when mouse over both of the two elements, only one element get filled with different color, the other element remain the same color.

Here is my file: mouseOver.rp (46.4 KB)

As you see, when mouse over the top element, the bottom element get no effect.

What I want will be like this one:

Or the effect for below code.

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}


a:hover, a:active {
    background-color: green;
}
</style>
</head>
<body>

<a href="default.asp" target="_blank"><img src="https://js.out.sh/assets/content/logo-icon-c9d91770856feb04176ffe2ef297a7792a11d88a4c88b951a695d5946464cfd0.svg"/></a>

</body>
</html>
#2

You can add a transparent widget above the 2 element,

#3

Apply the Interaction Styles desired to each widget separately. Group them with CMD/CTRL + G. Then right click the grouped widgets and select Trigger Interaction Styles from the contextual menu. Now when you hover any widget in the group it will trigger the mouseover styler for all widget in the group.

#4

Demo: https://aztwvm.axshare.com/#c=2
RP File: mouseOver.rp (53.4 KB)

#5

It works, thank you so much!

#6

That’s exactly what I am looking for, thank you so much! :thumbsup:

#7

How to make it possible when the prototype is in image form? I have created my mockup in Adobe XD and now using AXURE only for mouse hover effect.

#8

right click the grouped widgets and select Trigger Interaction Styles from the contextual menu

For anyone who was lost on this like I was, this option has been renamed to “Fire Mouse Style Effects”. Works like a charm.