Link entire content within a color section

and what do you do with all those “Touch-Screen-Junkies” visiting your site? (All mobiles, ipads, other touchpads etc.)
If they “Scroll” down they will press the “Link” immediately – because color-section width is the screen-width.
That is the reason why the google map (if placed in a color section) in enfold has the opportunity to set the pointer-events to nothing.

by the way – i see that the column padding has no active link – so it might be better to have no padding here – and to set the padding to the content.

so i gave to those contents a custom class (columnlinkpadding) and gave the link a hover style:

.column-link a {
    display: block;
    height: 100%;
    width: 100%;
}

.column-link a:hover {
    box-shadow: 1px 1px 5px #333;
}

.column-link div {
    display: inline-block;
}

.column-link .columnlinkpadding {
    padding: 5px 30px;
}

But : A link in that column works but destroys the construction. (by the way a link in a link is not valide code)

yes but as mod you have to be fast – and those demos with screenshots costs a lot of time.
Only other participants – maybe working on similar problems can do that.
Your welcome

Hi guys, how can i get this solution to work for columns within a grid row cell, or just a grid row cell itself? (in which case I’d like to have a color hover cover the grid row cell as well.)

Thanks for the link John. Need a little help.

I’ve almost got it but my solution is only affecting the individual elements within the grid column and not the column itself. I can’t figure out how to target it. My mouse-out transition won’t work either. Here’s my code:

#top .rtr-column-link av-layout-grid-container entry-content-wrapper main_color av-flex-cells  avia-builder-el-1  el_after_av_revolutionslider  el_before_av_section  submenu-not-first container_wrap fullsize {
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity background-color 0.5s ease-in-out;
}
#top .rtr-column-link :hover {
  background-color: white;
  transition: background-color 0.3s ease-in-out;
  opacity: 0.5;
}

Appreciate any help.

Thanks!
NIck

• This reply was modified 7 years, 7 months ago by ridick6.

Ok that didn’t work but i’ve managed to make some progress. Seems I was on to something yesterday but I forgot to add the period before the styles after my own style.

Here’s what I got to work, at least to get a color change over the entire container on hover, with the ease-in transition working (but not ease out):

#top .rtr-column-link .av-layout-grid-container {
  display: block;
  width: 100%;
  height: 100%;
}
#top .rtr-column-link:hover  {
  background-color: #000;
  transition: all 0.3s ease-in-out;
  opacity: 0.5;
}

The problem is no matter what I do I can’t get the hover color to change. It stays the white with opacity only. Also the link doesn’t span the entire block. and then theres that pesky ease-out transition that won’t work no matter what I try.

Also i’d like to have a separate option to make the hover affect the background only (as well as cover everything as it is now.)

The container i’m targeting is the Talent Acquisition box on the left under the hero.

Let me know if you find it.

Thanks!