Site Title Text Hover

[XLD]

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]

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]

@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]

No problemo!

[SL]

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]

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]

This post is deleted!

[Richard]

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]

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]

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