Code for Image on hover instead of color changing

andresand · May 2017

Hi!

Is it possible to have an image when I hover over the submenus of the header, rather then the standard color change?

For example, take a look at this website -- http://www.servion.se --

If you hover over ''TJÄNSTER'', the submenus comes down and are visible in white

Now when you hover over the submenus, the color changes from white to grey.

Is it possible to change this hovering effect from the standard colouring (of grey in this example) to an image instead? Meaning, when I hover over the submenus, the white does not become grey, but instead shows a picture in the background.

Is there a code for this I can use in CSS?

Thank you!

---------------

Edit:

And one more thing, is the same principle possible on the sidebar?

If you click on ''TJÄNSTER'' and enter the page, there is a sidebar to the left. Atm the selected one is orange and upon hovering on other pages of the same sidebar they also become orange. Is there a code for having an image here as well, rather then just the color orange.

Bryan · May 2017

Hi,

Sorry but this is not possible, you will not be able to target individual menu items with css to set up background images.

thanks

andresand · May 2017

Hi!

I think you misunderstood me. I want this effect on all menu items, not just individual ones.

I only gave you the example above with "Tjänster" to explain what I meant.

So again to make it clear, I want this to affect all menu items when I hover.

Thank you!

andresand · May 2017

I can make it even clearer. I want an image to show as both hover and Active when i click and hover ocker the services sidebar to the left menu. Now it is an orange rektangle. I want an image to show instead of the rectangle

Bryan · May 2017

Please show me on a screenhot what exacly do you want to acomplish and we will tell if it is possible.

andresand · May 2017

Hi again!

Here comes the screenshots

https://snag.gy/c9NedL.jpg --- pic 1

https://snag.gy/ft0XNr.jpg -- pic 2

Bryan · May 2017

Sorry but this customization is too much, we will be not able to help.

andresand · May 2017

Shouldn't it be simple css-code for the sidebar. Forget about the menu.

Bryan · May 2017

Here you go

.widget_mfn_menu ul li.current_page_item > a, .widget_mfn_menu ul li:hover > a  {
	background: url('http://www.servion.se/wp-content/uploads/2017/05/HEADERBG-1ny-22-2.2-copy.png')no-repeat center center !important;
}

andresand · May 2017

Oh, I did not see this, thank you very very much!! You are amazing!! ^:)^ ^:)^ B-)

Code for Image on hover instead of color changing

Comments

This website uses cookies