Home/ Questions/Q 8539953
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T11:29:20+00:00

I have a simple JQuery element selector – as you’d expect, moving in and

  • 0

I have a simple JQuery element selector – as you’d expect, moving in and out of elements does some highlighting. It works, but I’m running into 2 issues that I’d love some help with please (I’m sure a CSS whizz will solve this in seconds!!):

1) adjacent elements sometimes mask the highlighting of their neighbours (see DIV 1 in this fiddle – I’d like to have the red shadow appear on all FOUR sides of DIV 1, rather than only on those that don’t touch a neighbouring DIV – I also tried adding a z-index but it doesn’t solve it)

2) when an element contains an anchor link that has text which word wraps onto more than one line each line of text is highlighted – ideally I’d like the whole link to be highlighted (e.g. see DIV 4 in the same fiddle – hover over the link that wraps over 3 lines – rather than having 3 red shadow boxes, can I get 1 shadow box around the whole link?

NOTES:
I’m using this code on top of a variety of 3rd party web pages, so I can not change/edit the HTML in a scalable way

EDIT:

Thanks to those who answered below – your solutions worked on my fiddle demo – I’ve now taken these across into my actual code but I can’t get the images to ‘come to the front’ when I hover over them – many images still only have their hover SHADOW appearing on less than 4 sides – my code is this (but needs php):

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <style>
        img:hover{
            -webkit-box-shadow: 0 0 17px 10px green;
            -moz-box-shadow: 0 0 17px 10px green;
            box-shadow: 0 0 17px 10px green;
            z-index:5555555555;
            position:relative;
        }
</style>
</head>

<body>
<?php 
    echo'<div>';
             $url = 'http://www.guardian.co.uk';
             $data = file_get_contents($url);
             echo $data;
    echo'</div>';
    ?>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Question 1 – you are only seeing the border on three sides because the bottom edge is under the second box. Pop it to the front like this – this actually bring any of your sibling divs to the front when hovered

    div:hover {z-index:5; position:relative;}

    Question 2 – set the link to 

    display:block;

    see my update to your fiddle

    http://jsfiddle.net/FusrG/9/

    • 0