CODEWITHSUNDEEP
jquerycsshover
Kasper van der Hoofd
Kasper van der Hoofd

Reputation: 43

How to add a .hover effect to a div?

I am pretty new to programming but I cant seem to add an .hover effect using jquery.

$(document).ready(function() {
  $('.mainr').hover(
    function() {
      $(this).addClass('.mainh')
    },
    function() {
      $(this).removeClass('mainh')
    });
});
.main {
  position: absolute;
  left: 20%;
  width: 60%;
  height: 500px;
  background-color: #D8D8D8;
  color: #ffffff;
}
.mainr {
  position: absolute;
  left: 0px;
  top: 50%;
  width: 23%;
  height: 50%;
  border-radius: 50%;
  background-color: #0B0B3B;
  float: left;
  color: #D8D8D8;
  text-align: center;
  vertical-align: 50%;
  font: 20px"Interstate", "Lucida Grande", Arial;
}
.mainh {
  position: absolute;
  left: 0%;
  top: 50%;
  width: 23%;
  height: 50%;
  border-radius: 50%;
  background-color: #D8D8D8;
  float: left;
  color: #0B0B3B;
  text-align: center;
  vertical-align: 50%;
  font: 20px"Interstate", "Lucida Grande", Arial;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="mainr">Register</div>
</div>

and could you also tell mehow to center the text inside the div (setting the height)

Thanks,

Upvotes: 2

Views: 1457

Answers (6)

Katrin
Katrin

Reputation: 891

First of all, make sure you have include the jquery library.

And you may try to use toggleClass instead of addClass and removeClass

$(document).ready(function(){
    $('.mainr').hover( 
       function(){ 
          $(this).toggleClass('mainh'); 
       }
    );
});

And to vertical center the word inside the div, just add the following three line in the div css

display: flex;
flex-direction: column;
justify-content: center;

Demo: http://jsfiddle.net/d5t2fLLh/1/

Upvotes: 1

Code Lღver
Code Lღver

Reputation: 15603

You can do it by CSS too. No need of JS:

Try this:

.mainr:hover {
    position: absolute;
    left: 0%;
    top: 50%;
    width: 23%;
    height: 50%;
    border-radius: 50%;
    background-color: #D8D8D8;
    float:left;
    color: #0B0B3B;
    text-align:center;
    vertical-align:50%;
    font: 20px "Interstate","Lucida Grande",Arial;
}

Replace .mainh with .mainr:hover and this will work for you without any JS. cheers!!!

EDITED:

In your JS code there is minor mistake:

$('.mainr').hover(
function() {
  $(this).addClass('mainh');
},
function() {
  $(this).removeClass('mainh');
}
);

Try the above this will work.

Problem was $(this).addClass('.mainh'); in this line you have write .mainh which should be mainh. In JS there is no need to give . to class if you are class name, means you are using it in function. . is used the selectors only.

Upvotes: 1

Ajay
Ajay

Reputation: 235

You Forgot to add the Jquery library and there is one mistake in code .When you addClass you need not to put the .(dot) for that.Actual code will be like this

$(document).ready(function() {
  $('.mainr').hover(
    function() {$(this).addClass('mainh')},
    function() {$(this).removeClass('mainh')}
  );
});

Upvotes: 1

jmgross
jmgross

Reputation: 2336

If you want to stay in jQuery you have to correct your mistake and remove the . on your addClass call :

$('.mainr').hover( 
   function(){ $(this).addClass('mainh') },
   function(){ $(this).removeClass('mainh') }
);

jsFiddle

But the easiest solution is to use CSS like in @CodeLღver answer

Upvotes: 1

Dokula PraveenKumar
Dokula PraveenKumar

Reputation: 1

Adding a hover state to an element is durn easy. Let's use an opacity change as an example:

div
{
opacity:1.0;
}
div{
opacity:0.5
}

But what if we want to have that hover state apply to everything but the element actually being hovered over? (e.g. other adjacent sibling divs)

Let's assume this basic HTML:

<section class=parent>
<div></div>
<div></div>
<div></div> 
</section>

We'll apply the current CSS properties to all the children of the parent when the parent is in the hover state.

.parent:hover > div {
  opacity: 0.5;
}

Then when the parent is hovered and the individual div is hovered, we bump the opacity back up, giving the final effect we are looking for.

.parent:hover > div {
  opacity: 1.0;
}

Upvotes: 0

odedta
odedta

Reputation: 2478

I have updated your fiddle

In order to add CSS hover effect using jQuery you can do $(this).css('PROPERTY','VALUE') }

Upvotes: 0

Related Questions