jQuery Overlay

I have a timeline that I've built in jQuery. I need to grey out (using an overlay) everything but the element that is being moused over and remove the overlay on mouse out. I can't seem to get it working. I can get jQuery to output to console.log when an element is moused over, but I don't know how to add the overlay and pop out the moused element.

Here is a JSFiddle with the timeline.
https://jsfiddle.net/d8hn8c4k/

Please help me with some jQuery to overlay everything but the orange timeline rect when it's being moused over.
LVL 1
dale_abramsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
what bout CSS?
Test page : https://jsfiddle.net/abkuqok6/

rect:hover {
    fill:grey !important;
}

Open in new window

0
Julian HansenCommented:
Not exactly what you are wanting but is this going in the right direction? (Obviously colours would need to be changed)
<!doctype html>
<html>
<head>
<title>Test</title>
<style type="text/css">
rect:hover {
	fill: rgba(255,0,0,1);
	background:red;
	color:red;
}
rect: {
	fill: rgba(0,255,0,1);
	background:blue;
	color:blue;
}

</style>
</head>
<body>
<svg width="1804" height="83">
	<g class="background">
		<line x1="30" y1="61.5" x2="1774" y2="61.5" stroke="#efefef" stroke-width="8"></line><text x="30.5" y="10" fill="#808080" font-size="12" text-anchor="middle">Aug 2014</text><line x1="30.5" y1="12" x2="30.5" y2="60" stroke="#efefef" stroke-width="1"></line><text x="178.5" y="10" fill="#808080" font-size="12" text-anchor="middle">Sep 2014</text><line x1="178.5" y1="12" x2="178.5" y2="60" stroke="#efefef" stroke-width="1"></line><text x="321.5" y="10" fill="#808080" font-size="12" text-anchor="middle">Oct 2014</text><line x1="321.5" y1="12" x2="321.5" y2="60" stroke="#efefef" stroke-width="1"></line><text x="469.5" y="10" fill="#808080" font-size="12" text-anchor="middle">Nov 2014</text><line x1="469.5" y1="12" x2="469.5" y2="60" stroke="#efefef" stroke-width="1"></line><text x="613.5" y="10" fill="#808080" font-size="12" text-anchor="middle">Dec 2014</text><line x1="613.5" y1="12" x2="613.5" y2="60" stroke="#efefef" stroke-width="1"></line><text x="761.5" y="10" fill="#808080" font-size="12" text-anchor="middle">Jan 2015</text><line x1="761.5" y1="12" x2="761.5" y2="60" stroke="#efefef" stroke-width="1"></line><text x="909.5" y="10" fill="#808080" font-size="12" text-anchor="middle">Feb 2015</text><line x1="909.5" y1="12" x2="909.5" y2="60" stroke="#efefef" stroke-width="1"></line><text x="1043.5" y="10" fill="#808080" font-size="12" text-anchor="middle">Mar 2015</text><line x1="1043.5" y1="12" x2="1043.5" y2="60" stroke="#efefef" stroke-width="1"></line><text x="1191.5" y="10" fill="#808080" font-size="12" text-anchor="middle">Apr 2015</text><line x1="1191.5" y1="12" x2="1191.5" y2="60" stroke="#efefef" stroke-width="1"></line><text x="1334.5" y="10" fill="#808080" font-size="12" text-anchor="middle">May 2015</text><line x1="1334.5" y1="12" x2="1334.5" y2="60" stroke="#efefef" stroke-width="1"></line><text x="1482.5" y="10" fill="#808080" font-size="12" text-anchor="middle">Jun 2015</text><line x1="1482.5" y1="12" x2="1482.5" y2="60" stroke="#efefef" stroke-width="1"></line><text x="1625.5" y="10" fill="#808080" font-size="12" text-anchor="middle">Jul 2015</text><line x1="1625.5" y1="12" x2="1625.5" y2="60" stroke="#efefef" stroke-width="1"></line><text x="1774.5" y="10" fill="#808080" font-size="12" text-anchor="middle">Aug 2015</text><line x1="1774.5" y1="12" x2="1774.5" y2="60" stroke="#efefef" stroke-width="1"></line>
	</g>
		
		<g class="span">
			<rect x="187.67671232876714" y="58" width="235.0045662100456" height="7" rx="0" ry="0" style="xfill: rgba(253,194,84,.6);" id="" onclick="" onmouseover=""></rect>
			<text x="300.17899543378996" y="54" fill="black" font-size="12" text-anchor="middle">Timeline Item 1</text>
		</g>
			
		<g class="span">
			<rect x="622.6812785388128" y="58" width="468.0529680365297" height="7" rx="0" ry="0" style="xill: rgba(253,194,84,.6);" id="" onclick="" onmouseover=""></rect>
			<text x="856.7077625570776" y="54" fill="black" font-size="12" text-anchor="middle">Timeline Item 2</text>
		</g>
</svg>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript">
$(function() {
    $('g rect').hover(function() {
        $('rect').css({fill: 'rgba(0,0,0,.25'});
        $(this).css({fill: 'rgba(0,255,255,1)'});
    },
    function() {
        $('rect').css({fill: 'rgba(255,0,255,1)'});
    });
});
</script>
</body>
</html>

Open in new window

0
dale_abramsAuthor Commented:
Thanks for the help folks. Maybe I wasn't clear with what I need to do. I want a lightbox style overlay to grey everything out within a certain div, except the element that I'm hovering over. These CSS hover attempts are not really accomplishing what I'm trying to do.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Slick812Commented:
greetings dale_abrams, , I read your problem question, however I did not really understand what the visual result you need to show on a "Mouse Over" of your SVG image "timeline" ? ?
Although you say "I need to grey out (using an overlay) everything but the element that is being moused over"
I really do not relate to your description of "grey out", and what that would look like in the SVG image.
You say that you need to use an "overlay", and I have worked in SVG images using javascript events, and unlike the HTML methods, the SVG image is a different display setup. If you want to create an add an SVG image element in JS , , I used code like this -
function addBlock(evt){
	var newG = doc.createElementNS(svg_ns, 'g');
	newG.setAttribute('id', 'mmBlk'+blkNum);
	var newRec = doc.createElementNS(svg_ns, 'rect');
	newRec.setAttribute('id', 'mmRec'+blkNum);
	
	newRec.setAttribute('x', '1');
	newRec.setAttribute('y', '1');
	newRec.setAttribute('width', '50');
	newRec.setAttribute('height', '31');
	newRec.setAttribute('fill', 'yellow');
	newG.appendChild(newRec);
	var newText = doc.createElementNS(svg_ns, 'text');
	newText.setAttribute('x', '2');
	newText.setAttribute('y', '20');
	newText.setAttribute('font-size', '9');
	var textCont = doc.createTextNode("Mind Block"+blkNum);
	newText.appendChild(textCont);
	newG.appendChild(newText);
	newG.setAttribute('transform', 'translate(123,123)');
	content.appendChild(newG);
	++blkNum;
	}

Open in new window

the line -
   content.appendChild(newG);
will add a Group to the SVG, which can be over top of any thing that was drawn before it was.
I do not think you need this complication to your code work.
Maybe if you can say what you need it to look like on a mouse over, as your meaning for "grey out" of the other timeline rectangles. If you just need the other timelines to be invisible on mouse over, you maybe can use Julian Hansen code, and just set the CSS visibility to false on a mouse over? ?
0
dale_abramsAuthor Commented:
I was able to solve my problem with the following...
<script type="text/javascript">
$("rect").on("mouseover",function(){
			$.each( $(this).parent().parent().children(), function( i, v ){
				$(v).find("rect").attr("class","faded");
				$(v).find("text").attr("class","faded");
			}); 
			$(this).attr("class","");
			$(this).next().attr("class","");
		}).on("mouseout", function(){
			$.each( $(this).parent().parent().children(), function( i, v ){
				$(v).find("rect").attr("class","");
				$(v).find("text").attr("class","");
			});
		});
</script>

<style>
.faded {
  opacity: 0.2;
  filter: alpha(opacity=20);
}
</style>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
dale_abramsAuthor Commented:
I am awarding points to all that posted trying to help, but the solution I came up with ultimately best suits my needs. Thanks.
0
Julian HansenCommented:
Just for interest - same solution less code
$('rect').hover(function() {
    $('rect, text').attr('class','faded');
    $(this).attr('class','');
  },
  function() {
    $('.faded').attr('class','');
});

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.