Link entire text box

Richard

Dear Daniel

@danny

Not built-in yet sorry, however i can help you create the Link you need 🌝

In the thread linked above, user zochovsky would like the Link for the purposes of changing colour on Hover, is this also what you wish to achieve?

When hovering over entire Text are, the Text within changes Colour?

If it related to say making Imagehover work - this is a bit more difficult.

Happy to see how i can help you achieve your design.

Talk soon & have a wonderful day Danny 🏖

Richard

danny

Dear @Richard

thanks so much for helping out. So yes, I would like that the entire Text, when hovering, changes the colour (instead of only one line).

Looking foreword !

Talk soon and all best wishes
Daniel

Richard

Dear Daniel

@danny

Where is the "news List" within your site?
https://www.marthekrueger.com/

Is it the information page?

Screen Shot 2022-02-17 at 6.14.43 PM.png

The whole text block should go blue? 👍

Best

Richard

danny

Dear @Richard,

it's here: https://www.marthekrueger.com/information/

So I would like that the entire Text, when hovering, changes the colour (instead of only one line).

Thanks again!

Talk soon and best wishes
Daniel

Richard

Dear Daniel

@danny

Normally i would just use CSS for hover but you have a few different elements going on ( link,span,paragraph ) so maybe we use some JQuery.

jQuery added to > Lay Options Custom CSS & HTML > Custom <head> Content >

<script>
    window.laytheme.on("newpageshown", function(layoutObj, type, obj){
        
         jQuery(".col").hover(function () {
    jQuery(this).toggleClass("color");
 });

    });
</script>

Reference: https://stackoverflow.com/questions/16821564/how-to-add-remove-class-on-mouseover-mouseout-jquery-hover

Custom CSS Added to > Lay Options > Custom CSS & HTML > Custom CSS

.color a{
    color: #0000ff;
}

.color span{
    color: #0000ff;
}

.color p{
    color: #0000ff;
}

Result:
Screen Shot 2022-02-23 at 8.23.40 PM.png

This Code will apply to ALL similar columns across your website. If you need to specify for just this page then the jQuery would change:

jQuery(".slug-information .col").hover(function () {
    jQuery(this).toggleClass("color");
 });

https://stackoverflow.com/questions/9753930/nested-jquery-selectors

https://laytheme.com/documentation/custom-javascript.html

Best

Richard

danny

Amazing @Richard, thanks so much! Have a nice day! All best wishes, Daniel

danny

Dear @Richard,

this works really well. Only one question: is it possible to exclude text blocks on this page https://www.marthekrueger.com/information/ from the link function ?

A few text blocks are only bare text but not links.

Thanks!

Best wishes

Daniel

Richard

Dear Daniel

@danny

If there are a select few elements that you don't wish your new CSS to apply to, assign them a class.

Then using that class you can assign CSS to them, maybe with the use of !important.

.my-class-name-here.color{ 
          color: blue !important;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/inherit

Or you could use the not selector:

https://stackoverflow.com/questions/19464660/apply-css-style-on-all-elements-except-with-a-specific-id

Or you may wish to be more specific with your original code, improve the targeting, but the elements you dont want need to have something like an ID or Class to set them apart from targeting.

https://www.w3schools.com/cssref/css_selectors.asp

Best wishes

Richard

danny

Dear @Richard, thanks so much! Have a nice day. Best wishes, Daniel

Richard

Thanks @danny have an amazing day! ⭐️

Lay Theme Forum

Link entire text box

Dear Daniel

@danny

Talk soon & have a wonderful day Danny 🏖

Richard

Dear Daniel

@danny

Best

Richard

Dear Daniel

@danny

Best

Richard

Dear Daniel

@danny

Best wishes

Richard

Before you post:

When you post:

Online Users