Javascrit when moving the mouse over a mobile phone, change the text of the cell

Asked

Viewed 27 times

0

I’m new, I’m learning a lot on the site.

I would like when you touch item 2, change the word item 2 to Yerba mate and continue to light item 4. 

$('.row-1 .column-2').hover(function () {
    $('.row-2 .column-2').toggleClass('active');
});

/*
$('.row-1 .column-2').hover(function(){
    alert("hovered");
    $('.row-2 .column-2').toggleClass('active');
    $('this').toggleClass('active');
});


/*
$('.row-1 .column-2').mouseenter(function(){
  $('.row-1 .column-2').addClass('active');
  $('.row-2 .column-2').addClass('active');
});

$('.row-1 .column-2').mouseleave(function() {
  $('.row-1 .column-2').removeClass('active');
  $('.row-2 .column-2').removeClass('active');
});
*/


/*
$('.row-2 .column-2').hover(function(){
    $('.row-1 .column-2').toggleClass('active');
    $('.row-2 .column-1').toggleClass('active');
});

/*
*/
.table-style {
    margin-bottom:15px;
}
.table-style td {
    border-collapse: collapse;
    border: 1px solid #ddd;
    text-align: center;
    padding: 5px 0px;
}
.table-style td span {
    font-size: 13px;
    color: #454545;
    font-weight: normal;
}
.table-style td span a {
    color: #8d8d8d;
    text-decoration:none;
}
.active {
    background: red;
}
.active span a {
    color: #000;
}
.table-style td p a:hover {
    color: #000;
    text-decoration:underline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<table id="tablepress-71" class="table-style" width="100%" border="1" cellspacing="0" cellpadding="0">
    <tr class="row-1">
        <td class="column-1"><span><a href="#">Item 1</a></span>
        </td>
        <td class="column-2"><span><a href="#">Item 2</a></span>
        </td>
    </tr>
    <tr class="row-2">
        <td class="column-1"><span><a href="#">Item 3</a></span>
        </td>
        <td class="column-2"><span><a href="#">Item 4</a></span>
        </td>
    </tr>
</table>

javascript css-hover

  • You don’t need JS for that. Use CSS only

  • But as a friend?

  • An example I use... a{text-Decoration:None} a:Hover{text-Decoration:underline}

  • You can comment on the CSS for me to see, I searched the forum and google how to do it and I didn’t find.

  • Class "active". active:Hover{font-color:#0f0;}

  • 1

    I got it, thanks

  • I’ll post the answer. mark as solved. vlw

Show 2 more comments

1 answer

0

You don’t have to use JS for this. You can only do it with CSS:

.item:hover {
  color: #0f0;
}
<table>
  <tr>
    <td class="item">Texto 1</td>
    <td class="item">Texto 2</td>
  </tr>
</table>

Browser other questions tagged javascript css-hover

You are not signed in. Login or sign up in order to post.