CODEWITHSUNDEEP
javascripthtmlcss
PeteTheGreek
PeteTheGreek

Reputation: 729

Javascript change element properties onmouseover onmouseout

I've got this code:

  <script type="text/javascript">
    $(document).ready(function () {
    $('.thumbspiccolimabelli').hover( function(e){

     var ider = $(this).attr('title');  // e.g. the other element I want to change colour on 
     console.log(ider);

     var test = document.getElementsByClassName(ider);
     for(var i = 0; i < test.length; i++) {
         if(test[i].style.color = 'red'){
            test[i].style.color = 'white';
         }
         else{
            test[i].style.color = 'red';
         }
     }
     console.log(test);

    });
  });
</script>

And i'm trying to change the colour of all element on the page that have the id of the element i'm hovering over, but it does'nt quite work.

The element im hovering over has a ID of "myhoverelement" and I have span elements that share the same ID, these ones I want the colour to change on.

Thanks

Upvotes: 0

Views: 320

Answers (2)

Eric Goncalves
Eric Goncalves

Reputation: 5353

Is this what you want? '#myhoverelement' is being replaced with '.myhoverelement'. IDs must be unique.

$('.thumbspiccolimabelli').on('hover' , function() {
    $('.myhoverelement').each(function() {
        $(this).css('background' , '#ffffff');
    });  
});

Upvotes: 1

Ibu
Ibu

Reputation: 43810

You dont need javascript for this

CSS:

.thumbspiccolimabelli {
    background-color: none;
}

.thumbspiccolimabelli:hover {
    background-color: #fff;
}

Upvotes: 2

Related Questions