CODEWITHSUNDEEP
jquerycssjquery-selectors
Steve
Steve

Reputation: 602

Trouble with CSS box-shadow while using JQuery to highlight elements

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>

Upvotes: 1

Views: 778

Answers (2)

Kyle
Kyle

Reputation: 67194

Ok, first, why not just use the :hover pseudo-selector in CSS? 

div:hover, a:hover
{
    -webkit-box-shadow: 0 0 17px 10px #f51f4c;
  -moz-box-shadow: 0 0 17px 10px #f51f4c;
  box-shadow: 0 0 17px 10px #f51f4c !important;
}​

Instead of using JS to do something that CSS has built in?

You'll have to give the .top div a position and z-index for it to display as you wish, and add display: inline-block; to the anchor for it to wrap around the link as you expected.

.sky a
{
    display: inline-block;
}

http://jsfiddle.net/Kyle_Sevenoaks/FusrG/7/

Using CSS hover to fix the shadow: http://jsfiddle.net/Kyle_Sevenoaks/FusrG/11/

Upvotes: 1

Charles Wyke-Smith
Charles Wyke-Smith

Reputation: 2507

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/

Upvotes: 2

Related Questions