Jump to content

Getting Multiple elements to light up when hovering over another


Recommended Posts

*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` (
`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 by Pentacore
Link to comment
Share on other sites

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');

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.