Make whole block a clickable link

Support
#1

If you look here:

https://followtheboat.com/join-ftbmates/

You can see six blocks, each with a coloured box and icon. I’d like to make this entire coloured box a clickable link, with a roll-over effect.

I’ve managed to make it a clickable link by following this thread

… by inserting this is JS

jQuery("#column-bosun").wrap("<a href='https://mywebsite.com/'></a>");

But how to add a roll-over effect?

I have changed the id and the class of my column to ‘column-bosun’ and when I click the ‘edit css’ of this element I have added

$el #column-bosun a:hover {background-color:#000; border:10px;}

but it’s not working. Have I misunderstood how this works? Or might it be that it is working but there are additional columns sitting on top of that column and is therefore hiding the hover effect? I put a large border on this to test just in case this is the problem.

Thanks.

#2

Hello @demonboy,

Thank you for the very detailed post information. I have inspected your page and I found out that you are using incorrect css code which is why your code did not work. Please have it updated and use this instead:

$el #column-bosun #bosun:hover {
    background-color: #000 !important; 
    border: 10px;
}

If you need anything else we can help you with, please let us know.

#3

Hi RueNel, thanks for getting back to me. I’ve added the code but unfortunately that doesn’t seem to work either. Caching is turned off.

#4

Hello @demonboy,

This code will only work if you insert this in the Customize tab of the section element settings.

$el #column-bosun #bosun:hover {
    background-color: #000 !important; 
    border: 10px;
}

The $el and the ID #column-bosun were applied on the same column element. Since you have inserted the code in the Customize tab of the column setting, you will need to update it and use this instead:

$el #bosun:hover {
    background-color: #000 !important; 
    border: 10px;
}

Please let us know if this works out for you.

#5

OK, we’re getting there. What I’m actually trying to do is create a roll-over effect on the entire column, not just the top half.

Also, shouldn’t it be possible to do something like this to create the effect for all columns

$el #column-bosun #bosun:hover, $el #column-helmsman #helmsman:hover
#6

Hello @demonboy,

Do you want something like this?

If that is the case, then you can use this code instead:

#column-bosun:hover > .x-row .x-col {
    background-color: #000 !important; 
    border: 10px;
}

#column-bosun:hover > .x-row .x-col,
#column-helmsman:hover > .x-row .x-col {
    background-color: #000 !important; 
    border: 10px;
}

#column-bosun:hover > .x-row .x-col .x-text,
#column-helmsman:hover > .x-row .x-col .x-text {
    color: #fff !important;
}

Hope this helps. Kindly let us know.

1 Like
#7

[quote=“RueNel, post:6, topic:65334”]Do you want something like this?
[/quote]

YES! That’s exactly what I’m after! Thank you so much for that. Of course I won’t be using the black hover effect, that’s just to test but now you’ve solved the basic issue I can crack on with something more fancy.

Once again, thank you for your time. Have a great weekend.

#8

OK, I’ve done something stupid! I decided to get rid of all the code and start from scratch, except the hover effect is still there and I can’t find the CSS anywhere in any of the Customise options! I’ve looked in all of the Customise sections for each Section3/row1/column1/row1/column1 but I can’t find it.

Any pointers?

#9

Hi @demonboy,

I can’t find it either since it’s added along with another generated CSS, so yes, probably within those sections. I recommend rechecking the section, rows, columns, and element’s CSS.

Though, if you can provide your admin login credentials in the secure note then maybe we can check it in the builder.

Thanks!

#10

Morning. I had included a secure note to assist me as the formatting was still there this morning. However I wrote some new CSS that appears to have overwritten the old CSS. Interested to know how these $el are operating. Are they adding something to the database or are they working on the fly? The guide suggests the latter but I’m curious to know why adding new code is over-writing the old code, even though I deleted the old code. I’m certain this has nothing to do with cache, but then, maybe it is.

Anyway, for the time being I have this under control. Thanks for your help.

#11

OK, just as a follow-up. I’m almost there but I’m just having a problem with the text not changing colour to white. I have included this code in the second section (quatermaster, captain and commodore):

#column-quartermaster:hover > .x-row .x-col,
#column-captain:hover > .x-row .x-col,
#column-commodore:hover > .x-row .x-col{

-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
 transform: scale(1.05);

}
#column-quartermaster:hover > .x-row .x-col{   
background-color: #c07800 !important; 
}

#column-captain:hover > .x-row .x-col{   
background-color: #bc0000 !important; 
}

#column-commodore:hover > .x-row .x-col{   
background-color: #001936 !important; 
}



 #column-quartermaster:hover > .x-row .x-col .x-text,
#column-captain:hover > .x-row .x-col .x-text,
#column-commodore:hover > .x-row .x-col .x-text, {
color: #fff !important;
}

I’ve used the same code on the section above and the first two links the text changes to white but not on the third one (First Mate).

Any clues?

#12

Hello @demonboy,

You have installed LiteSpeed cache. This would mean that then old cache version was served and not the latest changes you have made to the page. I’d recommend that you temporarily deactivate this plugin.

Please update your custom css and use this since you have two rows in the section:

#column-quartermaster:hover .x-row .x-col .x-text,
#column-captain:hover .x-row .x-col .x-text,
#column-commodore:hover .x-row .x-col .x-text, {
  color: #fff !important;
}

Hope this helps. Kindly let us know.

#13

I had already added that CSS that you supplied but it was making no effect and whilst I have Litespeed installed the caching is turned off (I haven’t turned it on in weeks). I have deactivated it to be sure but the text effect is not happening. This is my complete CSS for Section 4:

#column-quartermaster:hover > .x-row .x-col,
#column-captain:hover > .x-row .x-col,
#column-commodore:hover > .x-row .x-col{

  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
   transform: scale(1.05);

}
#column-quartermaster:hover > .x-row .x-col{   
  background-color: #c07800 !important; 
}

#column-captain:hover > .x-row .x-col{   
  background-color: #bc0000 !important; 
}

#column-commodore:hover > .x-row .x-col{   
  background-color: #001936 !important; 
}



#column-quartermaster:hover > .x-row .x-col .x-text,
#column-captain:hover > .x-row .x-col .x-text,
#column-commodore:hover > .x-row .x-col .x-text, {
color: #fff !important;
}
#14

Hello @demonboy,

Please remove the “>” in your code:

#column-quartermaster:hover .x-row .x-col .x-text,
#column-captain:hover .x-row .x-col .x-text,
#column-commodore:hover .x-row .x-col .x-text, {
  color: #fff !important;
}

Hope this helps.

#15

I’ve removed it just in the section you quoted but that hasn’t changed anything. Should I remove it across all the code? I’m guessing this is from you copying the selector from Inspector?

[edit] OK, I removed them all and now the first box (quartermaster) is not expanding. This behaviour is so strange!

#16

Hey @demonboy,

This code will transform only the column in the first row:

#column-quartermaster:hover > .x-row .x-col,
#column-captain:hover > .x-row .x-col,
#column-commodore:hover > .x-row .x-col{

  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
   transform: scale(1.05);

}

If you remove the >, all of the columns in all of the rows within the section will be scaled up by 1.05.

Hope this explains it.

#17

Hi RueNel. Sorry, but this doesn’t explain! This is the code I now have for this section:

#column-quartermaster:hover  .x-row .x-col,
#column-captain:hover  .x-row .x-col,
#column-commodore:hover  .x-row .x-col{

  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
   transform: scale(1.05);

}
#column-quartermaster:hover  .x-row .x-col{   
  background-color: #c07800 !important; 
}

#column-captain:hover  .x-row .x-col{   
  background-color: #bc0000 !important; 
}

#column-commodore:hover  .x-row .x-col{   
  background-color: #001936 !important; 
}



#column-quartermaster:hover .x-row .x-col .x-text,
#column-captain:hover .x-row .x-col .x-text,
#column-commodore:hover  .x-row .x-col .x-text, {
color: #fff !important;
}

And as we can see, neither the first section scales up, nor does the text turn white.

#18

What is baffling is that this is the code for the section above it (bosun, helmsman, firstmate):

#column-bosun:hover > .x-row .x-col,
#column-helmsman:hover > .x-row .x-col,
#column-firstmate:hover > .x-row .x-col{

  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
   transform: scale(1.05);

}
#column-bosun:hover > .x-row .x-col{   
  background-color: #0051b1 !important; 
}

#column-helmsman:hover > .x-row .x-col{   
  background-color: #0f9800 !important; 
}

#column-firstmate:hover > .x-row .x-col{   
  background-color: #980078 !important; 
}



#column-bosun:hover > .x-row .x-col .x-text,
#column-helmsman:hover > .x-row .x-col .x-text,
#column-firstmate:hover > .x-row .x-col .x-text {
color: #fff !important;
}
#19

OK, I’ve cracked it!

#20

I re-inserted the > back into the second section (quartermaster, captain, commodore), and I had an extra ‘,’ at the end of the third class, which is why the text wasn’t turning white.

Phew!

Appreciate your help with this, @RueNel. Thank you!