August 29, 201213 yr Hello All, could someone advise me on a method of highlighting all the divisions within a page containing the same CSS class name. Preferably on hover which I guess equates to mouseover in javascript. Changing the background color would be ideal but applying a border would also work for me. Thanking you in anticipation. Jim
August 29, 201213 yr Author Hi, interesting but not what I am looking for. I will try and explain it better. At the moment I can use .name:hover{background:#FF0000;} and when viewing page in browser I can hover over the div class="name" and have the background turn red. With this method I can only hover over one div at a time but wish for all the divs with the same class name to turn red when hovering over any one of them. Hope this clarifies. Jim
August 29, 201213 yr Author Hi, I would love to do this CSS only but can not see a way other than switching between style sheets. Plan on using, and learning javascript, so I guess that is the way to go. Jim
August 29, 201213 yr Here You go mouse over name class and color changes to blue on all name classes <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <style type="text/css"> .name { color:red; } .test { color:blue; } </style> </head> <body> <script type="text/javascript"> $(document).ready(function() { $(".name").on('mouseover', function() { $(".name").addClass("test"); }); }); </script> <div class="name"> <p>Top Name</p> </div> <div class="middle"> <p>Middle</p> </div> <div class="name"> <p>Bottom Name</p> </div> </body> </html> if you need any help let me know
August 29, 201213 yr Author Hi, thanks for that. It looks promising but I need a little more. Can you show me how to add in the mouseout? I need the default style when hover removed. The scenario is that my visible page has thirteen divisions and they are all controlled by only four classes. I need somrthing like what you have given but it has to reset and be able to repeat the process to highlight the divisions controlled by another of the classes involved. Asking a lot but thanks for your assistance. Jim
August 29, 201213 yr here it is with mouse out <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <style type="text/css"> .name { color:red; } .test { color:blue; } </style> </head> <body> <script type="text/javascript"> $(document).ready(function() { $(".name").on('mouseover', function() { $(".name").addClass("test"); }); $(".name").on('mouseout', function() { $(".name").removeClass("test"); }); }); </script> <div class="name"> <p>Top Name</p> </div> <div class="middle"> <p>Middle</p> </div> <div class="name"> <p>Bottom Name</p> </div> </body> </html> I am not 100% sure what else you need have you got a link so i can have a better idea
August 29, 201213 yr Author Thanks so much, just one more question if I may. Can you use shorthand in javascript ie 4 classes in one statement and if so would this syntax be correct? <script type="text/javascript"> $(document).ready(function() { $(".name").on('mouseover', function() { $(".name1, name2, name3, name4").addClass("test"); }); }); </script> The page is not live but I could put it up at a temp address if you wish a look. Thanks Again. Jim
August 29, 201213 yr this will only work on mouseover name class is that what you want? <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <style type="text/css"> .name { color:red; } .test { color:blue; } </style> </head> <body> <script type="text/javascript"> $(document).ready(function() { $(".name").on('mouseover', function() { $(".name, .name2 , .name3").addClass("test"); }); $(".name").on('mouseout', function() { $(".name, .name2, .name3").removeClass("test"); }); }); </script> <div class="name"> <p>Top Name</p> </div> <div class="middle"> <p>Middle</p> </div> <div class="name"> <p>Bottom Name</p> </div> <div class="name2"> <p>Top Name 2</p> </div> <div class="middle2"> <p>Middle 2</p> </div> <div class="name2"> <p>Bottom Name 2</p> </div> <div class="name3"> <p>Top Name 3</p> </div> <div class="middle3"> <p>Middle 3</p> </div> <div class="name3"> <p>Bottom Name 3</p> </div> </body> </html> Edited August 29, 201213 yr by ELITE
August 29, 201213 yr Author Great, yes only need one class for the highlighting. Very much obliged for your help. Should be more but certainly I will be hitting the thankyou button. Very adept at HTML and CSS but now I can see I need to add JS to my arsenal. Thanks again. Jim ps. page still a work in progress but stuck up temporary at http://www.jamaks.plus.com/template.html if you would like a look.
August 29, 201213 yr your welcome, just one thing i need to mention, for ease of use i used <script src="http://code.jquery.com/jquery-latest.js"></script> on a live site you should have the jquery on your server and also use the compressed version if you go to http://jquery.com/ and click the download link and have the jquery-1.8.0.min.js Production (32KB, Minified and Gzipped) checked then you need to put it on your server if you want to learn jquery visit http://docs.jquery.com/Tutorials if you need any help with anything else let me know
August 29, 201213 yr Author Thankyou, the elite of the elite! I shall start learning this new, to me, white magic art forthwith. And if I get stuck I shall give you a shout. Best Regards. Jim
August 31, 201213 yr Author Hi All, page is online and all working but now I need suggestions on a color scheme bearing in mind that there is little scope since few rules control multiple divs. Thanking You in anticipation. Jim http://jims-way.com/template/
Create an account or sign in to comment