CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
user2500861
user2500861

Reputation:

Highlight bootstrap row on hover

Here I have used bootstrap row to show my content. Originally it's height is less, on mouse hover I want to highlight by increase height and highlighting watmore ... attractively.

Is there any bootstrap class for this?

Example on Fiddle

<div class="c1">
  <div class="row">
    <div class="col-md-12">
      <div class="item">
        <img class="media-object" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRzqEv5GXTFGZ1jOzAMNldPJAB6qCU2LRaiiWsld9o7zN1gz_jKaQ" height="50" width="125">
        <div class="descriptionContainer">
          <h6>Title of page</h6>
        </div>
        <a class="pillBtn" style="background: '.$color.' !important;" href="#">50 </a>
        <a class="moreBtn" href="'.$url.'" target="_blank">&nbsp wat more?...
          <img class="smileyImg" src="http://www.mlvwrites.com/wp-content/uploads/2010/10/smiley-face.png" height="20" width="25">
        </a>
      </div>
    </div>
  </div>
</div>

Upvotes: 8

Views: 21763

Answers (2)

user123
user123

Reputation: 5407

You can use CSS hover to d this

Fiddle: Example

.item:hover h6 {
    margin-top: 20px;
    font-size: 14px;
}

.item:hover .moreBtn img {
    margin-top: 4px;
}

.item:hover .moreBtn {
    position: relative;
    font-size: 16px;
    margin-right: 10px;
    margin-top: 40px;
    color: red;
    text-shadow: 0px 1px 0px;
    font-family: Helvetica;
    font-weight:bold;
    text-style:italic;
    }
.item:hover .pillBtn {
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    background:#7CDD97;
    padding: 21px 70px 21.0px 70px;
    color: #FFF;
    font-weight: bold;
    font-size: 20px;
    text-decoration: none;
}
.item:hover {
    background:#F3F3F3;
    height: 70px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}
.item:hover .media-object {
    height: 70px;
    width: 140px;
}

Upvotes: 5

Prashobh
Prashobh

Reputation: 9542

Using jquery you can do this very easily 

$('.moreBtn').mouseover(function(){
    $(this).css({
        'color' :'red',
        //other styles
    })
});

or Using css

.moreBtn:hover{
    color:red ;
    //other styles
}

Upvotes: 2

Related Questions