views:

47

answers:

3

I'd try to explain what I mean, but there is an easier way: click here for jsfiddle example.

Basically I want the border color of the div rfrsh_btn to change when productOptionsMenu is hovered over.

I'm using jQuery with the .noConflict var because this site also uses Prototype.

jQuery:

var $j = jQuery.noConflict();

$j(".productOptionsMenu").hover(
    function () {
        $j(#rfrsh_btn).css({"border-color":"#85c222"});
    };
);

Thanks :)

+1  A: 

looks correct to me, maybe just add the missing quotes in

$j("#rfrsh_btn").css({"border-color":"#85c222"});
Daniel Brink
you might also have to re-instantiate the $j var inside the anonymous function
Daniel Brink
@Daniel: If `$j` is defined at the global level, then no.
Tomalak
@Tomalak: cool, will go give it a try
Daniel Brink
@Daniel: Logical conclusion: You don't have to re-instantiate `$` (or `jQuery`, for that matter) either - they're always there because they have been defined at the global object.
Tomalak
It is defined in another function in the same script tag.
Kyle Sevenoaks
+2  A: 
var $j = jQuery.noConflict();

$j(".productOptionsMenu").hover(
    // hover begin (mouse-in)
    function () {
        $j("#rfrsh_btn").css({"border-color": "#85c222"});
    },
    // hover end (mouse-out)
    function () {
        $j("#rfrsh_btn").css({"border-color": ""});
    }
);

Instead of css() I recommend using addClass() and removeClass(), respectively.

Tomalak
Thanks, works perfectly!
Kyle Sevenoaks
For some reason it doesn't work on the live site...
Kyle Sevenoaks
@Kyle: Describe "does not work".
Tomalak
Haha yeah, well the code is in place within the .tpl file in between literal tags, when I hover over the element, the border color doesn't change. The othee jQuery function works perfectly, and when I try to change the target element to change, it doesn't change.
Kyle Sevenoaks
@Kyle: Time to open developer tools and find out what's happening, since the above code itself obviously works.
Tomalak
Going through that now. It will be interesting to find out why it won't work.
Kyle Sevenoaks
Found the solution, I closed the function `});` too soon, fixed now, all working! Thanks Tomalak!
Kyle Sevenoaks
@Kyle: I thought it must be something simple. :-)
Tomalak
+1  A: 

Try this:

$j('.productOptionsMenu ').mouseover(function(){
  $j("#rfrsh_btn").css({"border-color":"#0000ff"});
});
Sarfraz