Code for Image on hover instead of color changing

andresand

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

andresand

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

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

andresand

Hi again!

Here comes the screenshots

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

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

Bryan

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

andresand

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

Bryan

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;
}

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

andresand

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