How to Change Background Color of Span Element on Hover with CSS

Any Content Management System (CMS), Joomla!, WordPress, Drupal, etc, however, it is now-a-days a web standard to build their themes or template, whatever you say, responsive for mobile devices. The horizontal long menu that we see in Desktop PC monitors shrinks to a 3-small-horizontal-bars in devices. Tap on it, the menu opens up expanding downward or sideway.


Responsive menu


As the menu script written in Joomla! CMS using Bootstrap version 2.3.2, HTML "span" is used. To change the background color on :hover or :focus, writing span:hover, or, span:focus and changing the "background-color" property will not change the color of that icon. Rather, we have to apply :hover, and/or, :focus effect on the parent element and change the background color of the "span" element as child item.

The LESS file name for responsive menu is named "navbar.less" and the corresponding CSS code is:

.navbar .btn-navbar .icon-bar { display: block; width: 18px; height: 2px; background-color: #fff; .border-radius(1px); .box-shadow(0 1px 0 rgba(0,0,0,.25)); }

As we can see, this ".icon-bar" is the class name of our "span". So, I will write the CSS in the correct media query (for making it responsive) as below:


@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
    .navbar .btn-navbar:hover span, .navbar .btn-navbar:focus span { background-color: #73ccbb; }


I hope that this little piece of code will be useful.

Happy CSSing!

Other articles of this category:

There is no article found in this category.