• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1346
  • Last Modified:

SVG Elements - hover effect and z-index


Im trying to use SVG to create something similar to the attached graphic. Essentially they are a collection of categories symbolised by the circles. Each cartegory/circle has a lot of textual information associated with it that is shown when the circle is clicked.  This data is stored in a DB. Also there is a hover effect that shows a snippet of data(as seen on graphic)

I have created the following as a quick test:

If you hover on top left circle it enlarges to depict the hover effect. How can i change the z-index of this? it currently sits below the adjacent circle and should be on top...

Also, do you think SVG is the best method to try and tackle this task? i did attempt html5 canvas but couldn't access each circle individually which i will need to do to be able to retrieve data from a database that is shown when each circle is clicked

  • 2
1 Solution
You cannot with z-index.
You could with jquery change the element order - i.e. on hover move that circle to be the last element in the block - this is assuming you will be doing the same for the other circles...
...if not then just move it to the end.
coolispaulAuthor Commented:
how do i move it with jquery?
$('body').on('mouseover', '#circle1', function () {
$(this).appendTo("#svg_ID") // add an ID to the svg.
$(this).css('transform', 'translate(-100px,-50px) scale(2)');

Open in new window

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.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now