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. change text content on hover

change text content on hover

Scheduled Pinned Locked Moved General Discussion
4 Posts 2 Posters 741 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.
  • J Offline
    J Offline
    jeff
    wrote on last edited by jeff
    #1

    Re: Site Title Text Hover

    Hi everyone,

    I've a problem on the website that I'm working on.
    I've found some code to change the content of a text block on hover. However I've some issue which are:

    Before to add some custom css, they were supposed to be links and when the content changes, the text block isn't a Link anymore. I might done somethings wrong.

    there is the link of the website: http://latelierjungle.com

    There is the code for the first text block:

    .mb :hover span {display:none}
    .mb :hover:before {content:"REALISATRICE"}
    .mb :hover:before {color: #ff8fea !important;}
    

    The second issue is when I'm pointing some text block like "Geoffrey Pauchard" or "Myriam", you can see some incoherence like double the content, like REALISATRICEREALISATRICE.

    I think I've missed something to stable the code.
    Hope it's not a tricky one :)

    Thanks in advance
    Jeff

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

      Dear Jeff @jeff

      It may pay to use simple jQuery for this function - The :before - first child() thing is creating some flow on effect causing the double up? not quite sure

      Interestingly the second repeat of "REALISATRICEREALISATRICE" is the link

      "REALISATRICE(working-link-REALISATRICE)"
      Screen Shot 2021-03-05 at 2.30.36 PM.png

      https://stackoverflow.com/questions/10701124/jquery-replace-text-of-element-on-hover

      Sorry that i am unable to help further right now, but i hope some others will speak up and help!! :)

      Best wishes
      Richard

      1 Reply Last reply
      0
      • J Offline
        J Offline
        jeff
        wrote on last edited by
        #3

        Thank you Richard for your help and the link.
        I've tried to put the code on the first link in the HTML head but nothing happen ;

        There is the code

        <script>
        
        $('.mb').hover(
            function() {
                var $this = $(this); // caching $(this)
                $this.data('defaultText', $this.text());
                $this.text("REALISATRICE");
            },
            function() {
                var $this = $(this); // caching $(this)
                $this.text($this.data('defaultText'));
        
               });
           </script>
        

        Thank you in advance for your help :)

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

          Dear Jeff @jeff

          Please remove your current CSS with the 'Before {content}' setup - Its not working properly :)

          Its not targeting your link <a href#>
          it's just inserting the text "REALISATRICE" " :before" the 'Class .mb' (this element being a parent of the <a> element) .

          After removing it, please insert the following code into your 'Custom <head> Content' area:

          <script>
          
          window.laytheme.on("newpageshown", function(layoutObj, type, obj){
              
                  jQuery('[data-id=73]').hover(function(){
                      jQuery(this).text("REALISATRICE");
                      }, function() {
                      jQuery(this).text("MYRIAM BOU-SAHA");
                      });
                      
                  jQuery('[data-id=75]').hover(function(){
                      jQuery(this).text("ILLUSTRATEUR");
                      }, function() {
                      jQuery(this).text("VINCENT DUPERRAY");
                      });
                      
                  jQuery('[data-id=76]').hover(function(){
                      jQuery(this).text("GRAPHISTE");
                      }, function() {
                      jQuery(this).text("CAROLE GENIN");
                      });
                      
                  jQuery('[data-id=77]').hover(function(){
                      jQuery(this).text("MOTION DESIGN");
                      }, function() {
                      jQuery(this).text("GUILLAUME COQUARD");
                      });
                      
                  jQuery('[data-id=77]').hover(function(){
                      jQuery(this).text("MOTION DESIGN");
                      }, function() {
                      jQuery(this).text("CÉLESTIN JEAN-CHARLES");
                      });
                      
                  jQuery('[data-id=78]').hover(function(){
                      jQuery(this).text("DESIGN & ARCHITECTURE");
                      }, function() {
                      jQuery(this).text("LES MARSIENS");
                      });
                      
                  jQuery('[data-id=79]').hover(function(){
                      jQuery(this).text("DESIGN OBJET & ESPACE");
                      }, function() {
                      jQuery(this).text("GEOFFREY PAUCHARD");
                      });
                      
                  jQuery('[data-id=12]').hover(function(){
                      jQuery(this).text("REALISATRICE");
                      }, function() {
                      jQuery(this).text("STEPHANIE WEERTS");
                      });
                
          });
          </script>
          

          When using Laytheme and JS/jQuery we need to remember two things as stated in the documentation:
          https://laytheme.com/documentation.html#custom-javascript

          You need to wrap your code in a 'newpage event' and also the common abbreviated '$' for jQuery should be changed/written as the full 'jQuery'.

          In the code above we want to target the link itself and change it, not another element - Every link <a> has its own 'data-id' so we can use that to target. E.g

          [data-id=75]
          

          If you need help with how to inspect your pages HTML structure and find Elements and Attributes etc,
          On the documentation page is help with using the browsers "development tools'
          https://laytheme.com/documentation.html#custom-css-styling

          .
          .
          Screen Shot 2021-03-11 at 4.16.10 PM.png

          .
          .
          .

          I hope this helps Jeff & best of luck - Google is your friend and also the Documentation page :)

          Best wishes
          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