Change the color of the panel by hovering the mouse

Asked

Viewed 862 times

-1

Considering the following code, (example from the bootstrap website):

<div class="panel panel-danger">
  <div class="panel-heading">
    <h3 class="panel-title">
      Panel Title
    </h3>
  </div>
  <div class="panel-body">
    Panel Content
  </div>
</div>

I need to change this panel-Danger to another panel, example: panel-info, when passing the mouse through it.

javascript html5 twitter-bootstrap

  • You must copy the paste code to make it easier for us to help you.

  • Welcome to Rodrigo! Avoid posting the image of the code, post the code. The formatting is very flexible see Here. After a look at this discussion

  • Miguel and Jean... I tried to put the code but it did not appear... I put the image rsss... but thanks

2 answers

1

You can change with css using Hover in the panel-Danger ex class:

.panel-danger:hover {
  background: cor;
}

Or change the class in jQuery with the mouseover ex:

$(".panel-danger").mouseover(function() {
  $(this).removeClass("panel-danger").addClass("panel-info");
}).mouseout(function() {
  $(this).removeClass("panel-info").addClass("panel-danger");
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="panel panel-danger">
  <div class="panel-heading">
    <h3 class="panel-title">
      Panel Title
    </h3>
  </div>
  <div class="panel-body">
    Panel Content
  </div>
</div>

If you choose this option I advise you to use an ID instead of the class itself.

0

Skramewell’s answer is very good, but this way will make the change every time we declare the class panel panel-danger.

Create a custom class or ID to use in these cases. I will create a class called hover-personalizado, so you use it when you want to make this change. Example:

$(".hover-personalizado").mouseover(function() {
  $(this).removeClass("panel-danger").addClass("panel-info");
}).mouseout(function() {
  $(this).removeClass("panel-info").addClass("panel-danger");
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="panel panel-danger hover-personalizado">
  <div class="panel-heading">
    <h3 class="panel-title">
      Panel Title
    </h3>
  </div>
  <div class="panel-body">
    Panel Content
  </div>
</div>

Browser other questions tagged javascript html5 twitter-bootstrap

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