Link entire text box

[danny]

Hi @Richard

is it possible to link an entire text books instead of single lines? The same topic has been posted here. So I wonder if there is any update on this?

It's about the news list here: https://www.marthekrueger.com/

http://laythemeforum.com/topic/5756/feature-request-link-entire-text-box

Thanks and kind regards,

Daniel

[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?

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:

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! ⭐️