5

I was bored and a little disappointed in the Diablo 3 theme's navigation bar at the top not having any sort of hover-state, so I created two different custom user-styles that you can plug into a browser extension which applies them to the site (such as Stylish). You can just add the one you like and tada, hover-state!


Hover-State 1: White background. This one just moves the background position of each navigation button to it's "selected" white state.

Preview of hover-state 1

body.d3a .nav #nav-questions:hover { background-position: 0 -72px }
body.d3a .nav #nav-tags:hover { background-position: -127px -72px }
body.d3a .nav #nav-users:hover { background-position: -220px -72px }
body.d3a .nav #nav-badges:hover { background-position: -321px -72px }
body.d3a .nav #nav-unanswered:hover { background-position: -432px -72px }

Hover-State 2: White text. This one is a bit more advanced. It involves adding a white box behind the background of the button that turns white on hover. I pushed a lot of styles into this to try and make it perfect (because I'm like that).

Preview of hover-state 2

body.d3a .nav li { height: 24px; margin-bottom: 6px }
body.d3a .nav li #nav-unanswered { width: 121px }
body.d3a .nav li:not(.youarehere) { position: relative }
body.d3a .nav:not(.askquestion) li:not(.youarehere):after { background-color: transparent; bottom: 8px; content: " "; left: 13px; position: absolute; right: 15px; top: 9px }
body.d3a .nav:not(.askquestion) li:not(.youarehere):hover:after { background-color: #FFF }
body.d3a .nav li:not(.youarehere) a { position: relative; z-index: 999 }

Hover-State 3: Ultimate edition. This one uses an alternate background image that just takes the first row of buttons and lightens them up a bit to preserve the text transparency and also make the text on the buttons match each other (the plain white one didn't have shadow). It also utilizes the semi-transparent text colors for the extra sleek effect.

Preview of hover-state 3

body.d3a .nav #nav-questions, body.d3a .nav #nav-tags, body.d3a .nav #nav-users, body.d3a .nav #nav-badges, body.d3a .nav #nav-unanswered { background-image: url('http://i.stack.imgur.com/xCrah.png') }
body.d3a .nav li { height: 24px; margin-bottom: 6px }
body.d3a .nav li #nav-unanswered { width: 121px }
body.d3a .nav li { position: relative }
body.d3a .nav:not(.askquestion) li:after { background-color: transparent; bottom: 8px; content: " "; left: 13px; position: absolute; right: 15px; top: 9px }
body.d3a .nav:not(.askquestion) li.youarehere:after { background-color: rgba(0, 0, 0, 0.75) }
body.d3a .nav:not(.askquestion) li:hover:after { background-color: rgba(255, 255, 255, 0.5) }
body.d3a .nav:not(.askquestion) li.youarehere:hover:after { background-color: rgba(0, 0, 0, 0.5) }
body.d3a .nav li a { position: relative; z-index: 999 }

Enjoy your hover-states! Feel free to modify your favorite state to suit your needs. The opacity on #3 is a tad low, you might increase it to 0.6 from what it's at.

You must log in to answer this question.

Browse other questions tagged .