change text content on hover

jeff

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

Richard

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

jeff

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

Richard

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