CSS + Timeline transition effect


#1

Hello Buddies, I making two group of navigation. In group A, at the top right corner of my scene, I assigned <a tag with id to them (( like: <a id=“buttonProduct” Product</a )), in order to trigger hover color transition effect by CSS. In group B, the left side of my scene, I already assigned color transition to them triggered by waypoints & timeline, but I also like to do the same hover effect like group A by CSS. I find it is not working, maybe inference?? Can I do it with CSS or only to do it with extra timeline for that hover effect or …?? Thanks. Dokinse 03 problem.hype.zip (59.2 KB)


#3

@motchiual

The following worked for (left side) group B, “#buttonL1” (as referenced in the CSS):

In the innerHTML of #buttonL1:

1 - Removed the anchor tag and replaced it with a span tag. The other “buttons” in group B did not have an anchor tag; not sure why you used it except as a ID “holder” for test purposes?

<style>
span:hover {
    color: red;
}
</style>

<span>Meal Collection</span>

2 - Removed the styles for “#buttonL1” in the HeadHTML.

“Meal Collection” now changes color with the page scrolling and will change color with a mouse hover.


EDIT: Additional Note

Have had a bit more time to experiment and… using Hype’s “Button Controls” (“Edit” Menu) for a given element (Normal, Hover & Pressed states) worked just as well as using the inline CSS I demo’d above.


#4

Thanks Jim, I tried, it’s work! btw, would I instead that style “”" span: hover{ color: red;} “”" inside the head instead of the innerHTML of the text element?Dokinse 03 problem try.hype.zip (59.2 KB)


#5

If I understand You correctly You would like to put the CSS styling back in the “Head HTML” instead of the element’s “innerHTML”?

Possibly that might work using techniques I am not aware of - but we are competing with the settings in Hype’s Timeline for what the styling should be - which seemed to be overriding the internal style sheet (in the “Head HTML” in your original project). The easiest way I know to countermand this situation is to increase the level of specificity by placing the CSS styling inline with the element (i.e. “innerHTML” in the Hype universe).

For more on CSS specificity please see:
https://www.w3schools.com/css/css_specificity.asp


#6

Thanks, yes, I think sometime it is handy ^^