Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Site Title Text Hover

Site Title Text Hover

Scheduled Pinned Locked Moved General Discussion
10 Posts 4 Posters 458 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • X Offline
    X Offline
    XLD
    wrote on last edited by
    #1

    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!

    1 Reply Last reply
    0
    • mariusjopenM Offline
      mariusjopenM Offline
      mariusjopen
      Global Moderator
      wrote on last edited by
      #2

      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

      www.mariusjopen.world

      X 1 Reply Last reply
      0
      • mariusjopenM 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

        X Offline
        X Offline
        XLD
        wrote on last edited by
        #3

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

        1 Reply Last reply
        0
        • mariusjopenM Offline
          mariusjopenM Offline
          mariusjopen
          Global Moderator
          wrote on last edited by
          #4

          No problemo!

          www.mariusjopen.world

          1 Reply Last reply
          0
          • S Offline
            S Offline
            SL
            wrote on last edited by
            #5

            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

            1 Reply Last reply
            0
            • RichardR Offline
              RichardR Offline
              Richard
              Global Moderator
              wrote on last edited by
              #6

              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

              1 Reply Last reply
              0
              • S Offline
                S Offline
                SL
                wrote on last edited by
                #7
                This post is deleted!
                1 Reply Last reply
                0
                • RichardR Offline
                  RichardR Offline
                  Richard
                  Global Moderator
                  wrote on last edited by Richard
                  #8

                  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":

                  Screen Shot 2020-09-14 at 2.51.54 PM.png

                  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

                  1 Reply Last reply
                  0
                  • S Offline
                    S Offline
                    SL
                    wrote on last edited by
                    #9

                    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

                    1 Reply Last reply
                    0
                    • RichardR Offline
                      RichardR Offline
                      Richard
                      Global Moderator
                      wrote on last edited by
                      #10

                      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

                      1 Reply Last reply
                      0
                      Reply
                      • Reply as topic
                      Log in to reply
                      • Oldest to Newest
                      • Newest to Oldest
                      • Most Votes


                      I also code custom websites or custom Lay features.
                      šŸ’æ Email me here: šŸ’æ
                      info@laytheme.com

                      Before you post:
                      1. When using a WordPress Cache plugin, disable it or clear your cache.
                      2. Update Lay Theme and all Lay Theme Addons
                      3. Disable all Plugins
                      4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                      This often solves issues you might run into

                      When you post:
                      1. Post a link to where the problem is
                      2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                      3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                      Online Users
                      Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                      laytheme.com
                      • Login

                      • Don't have an account? Register

                      • Login or register to search.
                      • First post
                        Last post
                      0
                      • Recent
                      • Tags
                      • Popular
                      • Users
                      • Search