While this is a relatively simple topic I thought it would still be valuable for someone out there who’s trying to do something similar for their web-site or -application.
With v4.2 of the Forge viewer (and quite possibly before, but this was the first version in which I saw the change), the default highlighting of UI elements changed from a white glow to a colour-change to deep sky blue (#00bfff). I wanted to apply this same effect throughout the Dasher 360 UI, including the logo and text.
In Dasher 360 the logo – a leaping deer – is separate from the text that goes with it. So part of the trickiness, here, was to have them appear as if they were the same object. As the user hovers over either component of the logo, the whole thing should turn blue. The easiest approach would probably be to create a composite logo – with the icon and the text included – and then have a blue version of this logo be swapped in on hover. There are lots of reasons not to do this, though: wherever possible you want the browser to render text, to avoid resolution issues at scale, and it’s really not ideal to have to create new assets whenever you change the highlighting colour for your site.
Anyway… this problem can really be broken down into two sub-topics. The first is to have the logo change colour on hover. A quick web search resulted in this StackOverflow answer, which was perfect: as the Dasher logo is in white it’s easy to use it as an image mask. The provided approach works perfectly in Chrome and Firefox (the target browsers for Dasher 360) without the need for any JavaScript: CSS only.
The second problem is to have both components of the logo – the icon and the text – change colour when one of them is hovered over. For this it’s helpful to have a parent element – an anchor of class dasher_logo – that has two children, a div of class dasher_icon and a span of class dasher_text. As the parent element is hovered over, we just need to set the parent’s color property and the child icon’s background-color property to be blue. Luckily it’s straightforward to implement this kind of CSS selector – between parents and children – once you know how.
Here’s the effect you get from hovering over any part of the logo (whether the icon or the text):
Here’s a fiddle so that you can give it a try yourself:
That's it for this post. Hopefully someone will find the technique useful!
