Paging the clever css peeps :-)

I’m trying to find a class and failing.

Scroll down towards the bottom of the page and you’ll see a bike box hire section, if you hover over one of the images of a bike box an overlay appears over the image and some text appears. This is all good.

But, the border of the container for the image and the text below it changes from grey to blue, and it’s bloody annoying.

I just can’t isolate down the css to stop the border changing colour.



Could be this one:

[id^=pjWrapper] a:focus, [id^=pjWrapper] a:hover {
color: #23527c;
text-decoration: underline


Unfortunutely not, at least in the various versions I tried not.

I edited it this…

.pjWrapper a:focus, .pjWrapper a:hover {
color: #363636 !important;
text-decoration: underline

And a few other but the hover colour didn’t change. Maybe I’m editing it incorrectly?

Try this one:

#pjWrapperEquipment_theme2 .pjErProduct:hover  {
color: #23527c;

Sadly not!

It’s a difficult bugger this one!

My mistake, try this:

#pjWrapperEquipment_theme2 .pjErProduct:hover {
border-color: #23527c;

EDIT: with your own colour, of course…

I was just playing with the same classes, but no :-(

I’ve stripped out the page to just the script:

The css above is there, but it’s still blue!

Bollox, found the problem. It’s not the border that is blue, it’s the shadow, and it’s making the border appear blue!

#pjWrapperEquipment_theme2 .pjErProduct:hover {
border-color: pink;

That’s definitely working for me on that page…

Cracked it. Just added this and the box shadow is gone and so the border visially retains it correct colour.

box-shadow: 0 0 30px #333;

Thanks everso much for the help.

1 Like