[RESOLVED] css opacity

Hi guys,
i have a multiple rows table, on the row mouseOver event i set opacity to 0.5 on two images (originally opacity is 0)

Code:

---

$("tr").live({
                        mouseover:function(){
                        $(this).find('img').css('opacity','0.5').end();
                       
                        $(this).css('background-color','rgb(100%,100%,80%)')},
                       
                        mouseleave:function(){
                        $('img').css('opacity','0');
                        $(this).css('background-color','rgb(100%,100%,100%)')}
                        });

---

top part works like a treat.
now on the img mouse over i want to increase opacity to 1

Code:

---

$("img").live({
                        mouseover:function(){$(this).css('border','1px solid black').css('opacity','1');},
                        mouseleave:function(){$(this).css('border','0px').css('opacity','0.5');}
                                });

---

the border shows up but opacity dosnt seem to change
what have i missed?????????????????????
thanks in advance

Problem with event bubbling. The mouseover event is fired from the image and then bubbles up the DOM and fires from the tr; therefore, the change to opacity on the image's mouseover function is overridden by the change to its opacity on the tr's mouseover function (so it stays at .5).

To correct, you need to stop the bubbling after the event fires from the image:

Code:

---

$("img").live({
  mouseover:function(e){
    $(this).css('border','1px solid black').css('opacity','1');
    e.stopPropagation();
  },
  mouseleave:function(){
    $(this).css('border','0px').css('opacity','0.5');
  }
});

---

Also, end() is unnecessary if you're not going to chain more methods after it.

you are a legend, thanks , but now i fell into another issue :sick::sick:
i have datepicker assigned to an input on each row. if i clone before executing datepicker it works on all rows however, if i used datepicker on the first row and then cloned that row it wont work on the new row.
i also notice that class name changes from calendar to calendar hasDatepicker, i thought this mite be a work around but did not do much

Code:

---

$('.calendar,.calendar hasDatepicker').live('click', function() {
                                                        $(this).datepicker({showOn:'focus',dateFormat: 'dd-mm-yy'}).focus(); });

---

then tried this

Code:

---

$('tr').each(function(){
        $(this).find('input:first').attr('class','calendar');
        })

---

now, this got me going but still think i have missed something somewhere !!

After you've cloned a row, you could probably use something like:

Code:

---

$('.calendar').not('.hasDatepicker').datepicker( ... );

---

That will initialize the date picker for any element that both has class "calendar" and not class "hasDatepicker."