Hover mouse effect

d_alinus2004 · July 2019

Hello,

Please let me know if it's posible to create one hover effect on mouse.

So, i want to create the next effect: when i move the mouse on the arrea "Montaj modele masini" .( please see the picture ), to open the menu with category and subcategory.

https://imgur.com/2cKdbYl

Or, maibe i can make it with slider revolution ? If yes how i can add one menu there ?!

The menu i have allready.

Pablo · August 2019

Hello,

Of course, you can do it with the RevSlider, but you can achieve it easily with the basic html and css properties.

Check it here:

https://www.w3schools.com/cssref/sel_hover.asp

Remember, that CSS code should be inserted in the Theme Options > Custom CSS & JS > CSS

Thanks

d_alinus2004 · August 2019

Hello,

Taht's cool! I will try with basic HTML and css. it's easy!

Yesterdy i have try to add a code, and i make one mistake! i have add the content like that:

And now if i want to remove it or to change another think, i receive the error 403.

Please, can you help me to solve this problem, without make a back-up ?!

https://imgur.com/0wc4eQ4

https://imgur.com/zHRRP7v

Pablo · August 2019

Do not insert tags like <html>, <body>, <title>, <meta> etc. in the column item.

Just basic HTML tags.

Unfortunately, all what we can suggest is to remove whole page with that column or receive a backup file before that.

Remember, that CSS code should be inserted in the Theme Options > Custom CSS & JS > CSS - not in the column item.

Thanks

d_alinus2004 · August 2019

OK,

I understend!

But, for example, from this page:

https://www.w3schools.com/cssref/sel_hover.asp

I have copied all the css code and i have add on Theme Options > Custom CSS & JS > CSS

then i see that he affected me all the web site. Or i must to copy only some part from all this code?

Pablo · August 2019

You have to catch the certain element with CSS to tell him, that after hover, do something - for example, change color.

This docs are even better for explaining:

https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

So, you have to provide the class in the muffin builder (column item), and then catch it with the CSS code and apply him the :hover pseudo-class - like on examples I sent you.

Thanks

d_alinus2004 · August 2019

Hello,

I am very sory. but i stil don't understend exact where it's my mistake:

I test here the page: https://prosperanta.ro/sitenou/test-galerie/

On Custom CSS area i have add the next code:

span:hover + div {

display: block;

}

ul {

display: inline;

margin: 0;

padding: 0;

}

ul li {display: inline-block;}

ul li:hover {background: #555;}

ul li:hover ul {display: block;}

ul li ul {

position: absolute;

width: 200px;

display: none;

}

ul li ul li {

background: #555;

display: block;

}

ul li ul li a {display:block !important;}

ul li ul li:hover {background: #666;}

Then on the page side i have add the next code:

<div>

<a href="#">Useless Link</a>

<ul>

<li>

<a href="#">Dropdown Link</a>

<ul>

</ul>

</li>

</ul>

</div>

Pablo · August 2019

This CSS will change all of the UL and LI tags on your website, please read once more what I wrote above.

Also, this will explain you it better:

- Create the Column item and insert the DIV there like here:

http://prntscr.com/onc3jo

- Apply the CSS code into the Theme Options > Custom CSS.& JS > CSS

http://prntscr.com/onc52d

That's all,.

Thanks

d_alinus2004 · August 2019

Hello,

ok, i understend.

Now i have add this code on the column:

<a href="#">Useless Link</a>

<ul>

<li>

<a href="#">Dropdown Link</a>

<ul>

</ul>

</li>

</ul>

</div>

and this is the result:

https://prosperanta.ro/sitenou/test-galerie/

So, now i must to explore the rest the css ?!

Pablo · August 2019

What do you mean by "explore the rest the css" ?

If you want to catch elements (for example, let it be li), then you have to catch the parent element first to not to catch all of the elements on the website.

Like this: #highlight > li { color:blue; } - so it will make all of the li elements inside the #hightlight blue colored.

Thanks

d_alinus2004 · August 2019

Ok, That it's clear, i understend how i can create another color for hover mouse, but for dropdown menu ? i belive here it's the css of link

https://prosperanta.ro/sitenou/test-galerie/

Pablo · August 2019

The same as earlier answers.

Just catch the HTML element with CSS and customize it.

Thanks

d_alinus2004 · August 2019

Hello,

OK, that's fine. I understend!

Many thank's for all!

d_alinus2004 · August 2019

Hy again,

i have add a widget there who include the menu:

https://prosperanta.ro/sitenou/ and please see here:

https://imgur.com/Amfkjva

That's exact what i want. But, plase let me know if it's posible to make it floating .

Please see thei picture:

https://imgur.com/2cKdbYl

I belive that will be the best solution....

Bryan · August 2019

What do you mean by "floating".

If you want a sticky menu for the widget then it is not possible.

thanks

d_alinus2004 · August 2019

a OK, I understend!

there it's a plugin to make it stiky ?

If not i will make it with Dropdown ..:)

But there it'a loot of work because i have 172 links to add!

With the menu on widget it's easy because i have created allready the menu..:)

Pablo · August 2019

Unfortunately, we cannot recommend any plugins other than the ones we support. You can find the list on this page, in the sidebar:
https://themeforest.net/item/betheme-responsive-multipurpose-wordpress-theme/7758048

thanks

d_alinus2004 · August 2019

OK, I understend you!

Many thank's for all your suport!

Hover mouse effect

Comments