jQuery - Hover CSS Element 1 change Elevement 2

Question

I have two elements:

.navAbout
#slider

On hover of .navAbout, which is an A tag, I need the border color of (div) #slider to change to a specific color. Upon mouseOut, I need #slider to revert back to its original CSS declaration.

I have tried several codes. Here's my most recent:

<script>
      $(".navAbout").hover(function () {
        $("#slider").css({'border-color' : '#3bc624'});
      }, function () {
        var cssObj = {
          'border-color' : '#3bc624',
        }
        $("#slider").css(cssObj);
      });
</script>

Thanks for the help!

That looks approx correct. What is the issue you having?

Ilia G
– Ilia G

2011-12-15 21:56:39 +00:00
Commented Dec 15, 2011 at 21:56 — Ilia G
– Ilia G, Commented Dec 15, 2011 at 21:56
but your are using the same color for both events..

Gabriele Petrioli
– Gabriele Petrioli

2011-12-15 21:57:40 +00:00
Commented Dec 15, 2011 at 21:57 — Gabriele Petrioli
– Gabriele Petrioli, Commented Dec 15, 2011 at 21:57

jabclab · Accepted Answer · 2011-12-15 21:58:36Z

12

Something like this should help:

JS

$(".navAbout").hover(function () {
    $("#slider").addClass("coloured-border");
}, function () {
    $("#slider").removeClass("coloured-border");
});

CSS

.coloured-border {
    border-color: orange
}

answered Dec 15, 2011 at 21:58

jabclab

15.1k5 gold badges58 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

lonesomeday Over a year ago

Yes, doing it with classes is a far superior way – it's semantic and it means that a future styling change only needs to be made in your stylesheet. Good stuff.

Wes Dollar Over a year ago

Thanks! I didn't even think about manipulating the class! Great approached. I'll try this later tonight, but I'm 100% it'll work. Thanks everyone.

Wes Dollar Over a year ago

In theory, this should work, but it isn't. I've double-checked classes/ids for accuracy and messed around with the code a bit. No cascading issues either. Stumped. link @jakeclarkson

Wes Dollar Over a year ago

I'm sure you found it by now, but it's the nav. The purpose is to have the border hover along with the hover of the nav link so that the entire box turns the color of the hovered item.

jabclab Over a year ago

Thanks, I see what you mean. I think you need !important on your styles. Check out this jsFiddle I've knocked up; it may also give you some ideas about the JS implementation.

Community · Accepted Answer · 2017-05-23 12:25:45Z

0

this should do the trick in the direction you are trying

<script type="text/javascript">
$(function(){
      $(".navAbout").hover(function () {
        var slider = $('#slider');
        slider.data('style', slider.attr('style') );
        slider.css({'border-color' : '#3bc624'});
      }, function () {
        var slider = $('#slider');
        slider.attr('style', slider.data('style'));
      });
});
</script>

but the answer of @jakeclarkson is the correct conceptual approach to the problem..

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Dec 15, 2011 at 22:01

Gabriele Petrioli

197k35 gold badges276 silver badges331 bronze badges

Comments

ShankarSangoli · Accepted Answer · 2011-12-15 22:01:12Z

0

Try this

$(".navAbout").hover(
    $("#slider").toggleClass('borderColor');
});

Define a class with required border color

.borderColor
{
    border-color: #FF0000;
}

answered Dec 15, 2011 at 22:01

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:10:16Z

Your approach would work, but you're setting the color to the same thing both times.

Also, I'm not sure if you are only alternating between two colors, or if the color of #slider is set in different places and could be anything. If it could be anything then you'll need to check what it is and save it so that you can set the color back to what it was originally later on.

Ideally you should just change classes like jakeclarkson suggests above and avoid keeping style information in your javascript/css.

See this!

HTML:

<a class="navAbout">Hover over me</a> <div id="slider"> and I'll change</div>

JavaScript:

var originalColor ='';

$(".navAbout").hover(function(event){
   originalColor = $("#slider").css("border-color");
   $("#slider").css("border-color", "#3bc624");
}, function(event){
   $("#slider").css("border-color", originalColor); 
} );

Read:

http://api.jquery.com/hover/

http://api.jquery.com/css/

Collectives™ on Stack Overflow

jQuery - Hover CSS Element 1 change Elevement 2

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related