Getting Multiple elements to light up when hovering over another

[Pentacore]

*I wasnt quite sure what forum to put this at, so since im coding in PHP i posted it here*

 

I am currently creating a League of Legends Champion site where i want it to when i hover over a Champion (Character) i want its counters to get a red/green border (depending on if the champion is good against it or the champion itself is good vs it)

 

So i started using the CSS:hover way, but looking at this i cant help but to notice that it will require a whole lot of code, so im kinda wondering if theres another way of doing it with like Jquery or plain javascript (Maybe even a PHP Function?)

 

I got all the counters stored in a Database Built up as following:

 

CREATE TABLE `counters` (
`Name` TEXT NULL,
`Counter 1` TEXT NULL,
`Counter 2` TEXT NULL,
`Counter 3` TEXT NULL,
`Counter 4` TEXT NULL,
`Counter 5` TEXT NULL,
`Counters 1` TEXT NULL,
`Counters 2` TEXT NULL,
`Counters 3` TEXT NULL,
`Counters 4` TEXT NULL,
`Counters 5` TEXT NULL,
`Good With 1` TEXT NULL,
`Good With 2` TEXT NULL,
`Good With 3` TEXT NULL,
`Good With 4` TEXT NULL,
`Good With 5` TEXT NULL
)

 

i already know how to fetch the data and such, so thats not the problem (just included this if it would be usefull in anyway)

 

But ye, to summarize it im asking if theres another way to do it with Javascript/PHP or anything like that, and also if you would be kind enough to give me a hint about how to do that (i dont need you to write the whole code since i enjoy that myself) but simply a hint on how to do it.

 

And also once again i apologize if this is the wrong part of the forum to put it (move it if needed)

Edited January 16, 2013 by Pentacore

[stijn0713]

Rather weird formulated, but from what i understand you simply want to style DOM elements. This obviously is done with CSS. But you can use javascript/ jquery to select, alter (whatsoever) the DOM elements add styles . e.g.:

 

js --> document.getElementById(id).style.property=new style

jquery -> $('.selector').css('color', 'red');

[Pentacore]

i apologize if it was hard to understand.

 

So there isnt really much other ways to do it than to simply have all champions as classes at each champion picture?

 

i got a half-done version here: http://pentacore.se/fun/lol/index.php (this doesnt work fully since its not connected to the correct DB)

 

But simply put, when i hover over for example "Ahri" i want like "Fizz" to get a red border around him and "Brand" to get a green one (just examples)

[RussellReal]

You cannot JUST use CSS and HTML for this.

 

Unless everything you have in mind for getting changed during this hover, is within the hoverable element, it will not work.

 

abc:hover is now focusing on ABC which is currently being hovered, so any extra stylings such as:

 

.ahri:hover .frizz { } will not work if .frizz is not within the .ahri element.

 

what I will suggest however, would be to use javascript and onmouseover and onmouseout toggle the appropriate class names to be appended to the intended elements.

 

If you need any help, I will gladly help you for free, if you add my skype: RussellReal

 

- Russell