Site Title Text Hover

XLD · wrote on Sep 17, 2019, 7:09 AM

Hi there,

I would like to change my Site Title (Text)
on Mouseover.

Like: "Sitetitletext" becomes "Sitetitletext2" on mouseover.
(But stays "Sitetitletext" after the click).

I have browsed the forum but couldn't find anything.
Is this possible? (And if so: how?)

Thanks a lot in advance!

mariusjopen · Oct 6, 2019, 7:07 AM

Dear @XLD
you can use CUSTOM CODE for that.

Either jQuery or CUSTOM HTML to create a box which is on the same position and gets visible and insivible on hover.

Best!

Marius

XLD · replied to mariusjopen on Oct 6, 2019, 7:07 AM

@mariusjopen said in Site Title Text Hover:

Either jQuery or CUSTOM HTML to create a box which is on the same position and gets visible and insivible on hover.

Thanks Marius!

mariusjopen · wrote on Oct 8, 2019, 9:34 AM

No problemo!

SL · wrote on Oct 16, 2020, 1:24 PM

Hi togehter,

I also want to change a text, when hovering.
But in a menu.
@mariusjopen Is that also possible?

@XLD Have you implemented it, could I see it?
How did you do it, if I may ask?

Many thanks to you!

Stefan

Richard · wrote on Oct 20, 2020, 6:23 AM

Dear Stefan @SL

Could you post a link to website with the Menu in question and then it will be easier to discuss on the thread :)

Best wishes
Richard

SL · wrote on Oct 20, 2020, 8:49 PM

This post is deleted!

Richard · Oct 21, 2020, 4:50 AM

Dear Stefan @SL

Try adding this code:

[data-id="1"]:hover span {display:none}
[data-id="1"]:hover:before {content:"welle"}

[data-id="61"]:hover span {display:none}
[data-id="61"]:hover:before {content:"teilchen"}

Into "Lay Options - Custom CSS & HTML":

At the top of the Custom CSS page there will be an insert area called "custom css". Add the code and Remember to save at the bottom before viewing your webpage.

The Code targets the menu item based on the <a> link's Data-id. On Hover the Current Menu items text is turned off - "display:none" and then replaced with the content or text of your choice.

Let me know how you go :)

Best wishes, thank you for using Lay Theme and have a wonderful day

Richard

SL · wrote on Nov 5, 2020, 3:26 PM

Dear Richard @Richard-Keith

Thanks a lot!

I have tried it, in principle it works:
At least the first time. As soon as I click on one of the two pages, all menu items disappear.
They reappear when I'm out of the page area (firefox menu or similar).

On mobile the mouseover makes no sense, of course,
so i wrote it into the desktop CSS for testing.
But the tablet case is not yet covered.
Is there a possibility for this.
A pure certain screen size or something?

Best regards
Stefan

Richard · wrote on Nov 12, 2020, 11:49 PM

Dear @SL

Ok, sorry that my first option didnt work! :)
Remove that Custom CSS if you will and on the same Custom CSS & HTML Page but this time in 'custom <head> content add this code:

<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
 
 jQuery(".menu-item-44 font").hover(function(){
      jQuery(this).text("Welle");
      }, function(){
      jQuery(this).text("Teilchen");
});
 
 jQuery(".menu-item-62 font").hover(function(){
      jQuery(this).text("Teilchen");
      }, function(){
      jQuery(this).text("Welle");
});
 
  });
</script>

Let me know how you go, apologies once again for the delayed response :)

Best
Richard

Lay Theme Forum

Site Title Text Hover

Before you post:

When you post:

Online Users