Change panel color when mouseover

Question

Change panel color when mouseover

Navigation

#1 by (1 votes)
#2 by (0 votes)

-1

Given the following code, (bootstrap site example):

<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 I hover the mouse over it.

javascript html5 twitter-bootstrap

asked by anonymous 04.07.2016 / 17:22

2 answers

Erase rows in multiple tables Print Alert PHP [duplicate]

score 1 · Answer 1

You can change with css using hover in the panel-danger class ex:

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

Or you change the class in jQuery with 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><scriptsrc="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 opt for this option I advise you to use an ID instead of the class itself.

score 0 · Answer 2

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

Create a custom class or ID to use in these cases. I'm going to 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><scriptsrc="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>