0

I have written below code and 2 problem: 1) I want when cursor hover on my div with details class, color changed for whole div but in my code on internal div doesn't do that. 2) also the jquery lines written for all div almost is the same, and I have a lot of these div. can I write my code brief for avoid repeating?

Please can you tell me how to do this!

$(".detail-1").hover(function() {
  $(".detail-1 div:first-child").css("background-color", "green");
  $(".detail-1 div:nth-child(2) p").css("color", "blue");
})
$(".detail-1").mouseout(function() {
  $(".detail-1 div:first-child").css("background-color", "#41b5e7");
  $(".detail-1 div:nth-child(2) p").css("color", "black");
})


$(".detail-2").hover(function() {
  $(".detail-2 div:first-child").css("background-color", "yellow");
  $(".detail-2 div:nth-child(2) p").css("color", "blue");
})
$(".detail-2").mouseout(function() {
  $(".detail-2 div:first-child").css("background-color", "#41b5e7");
  $(".detail-2 div:nth-child(2) p").css("color", "black");
})


$(".detail-3").hover(function() {
  $(".detail-3 div:first-child").css("background-color", "pink");
  $(".detail-3 div:nth-child(2) p").css("color", "blue");
})
$(".detail-3").mouseout(function() {
  $(".detail-3 div:first-child").css("background-color", "#41b5e7");
  $(".detail-3 div:nth-child(2) p").css("color", "black");
})
.details {
  width: 200px;
  height: 90px;
  border: 1px solid #333;
  margin-top: 10px;
}
.details > div {
  float: left;
}
.details > div > p {
  line-height: 15px;
  padding-left: 10px;
}
.details div:first-child {
  width: 70px;
  height: 70px;
  background-color: #41b5e7;
  margin: 10px 0px 0px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="details detail-1" data-number="1">
  <div>
  </div>
  <div>
    <p>text-1</p>
    <P>Description-1</P>
  </div>
</div>
<div class="details detail-2" data-number="2">
  <div>
  </div>
  <div>
    <p>text-2</p>
    <P>Description-2</P>
  </div>
</div>
<div class="details detail-3" data-number="3">
  <div>
  </div>
  <div>
    <p>text-3</p>
    <P>Description-3</P>
  </div>
</div>

Improve this question
2

3 Answers 3

Reset to default
7

There is no need for jQuery in this, you can do the following using this CSS.

The best way would be to add classes to your divs, and target them that way. But if you can't edit your code, then check @RoryMcCrossan's answer.

Because although the psuedo selectors in CSS are useful, and certainly can be used the way you have, it is much better to use ids and classes whenever possible. It also means it is easier to follow the code.

So first, add a class to the div that changes color, and to the div that contains the text, like this:

<div class="color-block"></div>
<div class="text-block"></div>

Then target these with CSS like so:

.detail-1:hover .color-block {
    background: green;
}

.detail-1:hover .text-block {
    color: blue;
}

Example Snippet

.details {
  width: 200px;
  height: 90px;
  border: 1px solid #333;
  margin-top: 10px;
}
.details > div {
  float: left;
}
.details > div > p {
  line-height: 15px;
  padding-left: 10px;
}
.details div:first-child {
  width: 70px;
  height: 70px;
  background-color: #41b5e7;
  margin: 10px 0px 0px 10px;
}

.detail-1:hover .color-block {
  background: green;
  }

.detail-1:hover .text-block {
  color: blue;
  }
<div class="details detail-1" data-number="1">
  <div class="color-block">
  </div>
  <div class="text-block">
    <p>text-1</p>
    <p>Description-1</p>
  </div>
</div>

As you also have the details class on all of the container divs, if you want all of them to change to the same background color, or/and text color, you could do this:

.details:hover .color-block {
    background: green;
}

.details:hover .text-block {
    color: blue;
}
Improve this answer
2
  • Thank you for your discription.I did it as you told me.
    – samaneh
    Commented Feb 6, 2017 at 5:09
  • I had 12 div with the same content and event. I wanted if its possible instead of writing div'name: hover{ } for 12 times, perhaps the definition of a variable with jquery do it by writing a code for all.
    – samaneh
    Commented Feb 6, 2017 at 6:17
3

Your immediate issue is that you're using both hover() (which in itself is mouseenter and mouseleave) and also mouseout. This means that you're actually raising several events. To fix this use hover() alone and provide two function parameters. The first for mouseenter and the second for mouseleave.

$(".detail-1").hover(function() {
  $(".detail-1 div:first-child").css("background-color", "green");
  $(".detail-1 div:nth-child(2) p").css("color", "blue");
}, function() {
  $(".detail-1 div:first-child").css("background-color", "#41b5e7");
  $(".detail-1 div:nth-child(2) p").css("color", "black");
})

$(".detail-2").hover(function() {
  $(".detail-2 div:first-child").css("background-color", "yellow");
  $(".detail-2 div:nth-child(2) p").css("color", "blue");
}, function() {
  $(".detail-2 div:first-child").css("background-color", "#41b5e7");
  $(".detail-2 div:nth-child(2) p").css("color", "black");
})

$(".detail-3").hover(function() {
  $(".detail-3 div:first-child").css("background-color", "pink");
  $(".detail-3 div:nth-child(2) p").css("color", "blue");
}, function() {
  $(".detail-3 div:first-child").css("background-color", "#41b5e7");
  $(".detail-3 div:nth-child(2) p").css("color", "black");
})
.details {
  width: 200px;
  height: 90px;
  border: 1px solid #333;
  margin-top: 10px;
}
.details > div {
  float: left;
}
.details > div > p {
  line-height: 15px;
  padding-left: 10px;
}
.details div:first-child {
  width: 70px;
  height: 70px;
  background-color: #41b5e7;
  margin: 10px 0px 0px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="details detail-1" data-number="1">
  <div></div>
  <div>
    <p>text-1</p>
    <P>Description-1</P>
  </div>
</div>
<div class="details detail-2" data-number="2">
  <div></div>
  <div>
    <p>text-2</p>
    <P>Description-2</P>
  </div>
</div>
<div class="details detail-3" data-number="3">
  <div></div>
  <div>
    <p>text-3</p>
    <P>Description-3</P>
  </div>
</div>

Note that a much better approach to this would be to use CSS alone to achieve the same hover state effects using the :hover pseudo selector. This will also by proxy DRY your code up.

.details {
  width: 200px;
  height: 90px;
  border: 1px solid #333;
  margin-top: 10px;
}
.details > div {
  float: left;
}
.details > div > p {
  line-height: 15px;
  padding-left: 10px;
}
.details div:first-child {
  width: 70px;
  height: 70px;
  background-color: #41b5e7;
  margin: 10px 0px 0px 10px;
}
.detail-1:hover div:first-child { background-color: green; }
.detail-2:hover div:first-child { background-color: yellow; }
.detail-3:hover div:first-child { background-color: pink; }
.details:hover div:nth-child(2) p { color: blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="details detail-1" data-number="1">
  <div></div>
  <div>
    <p>text-1</p>
    <P>Description-1</P>
  </div>
</div>
<div class="details detail-2" data-number="2">
  <div></div>
  <div>
    <p>text-2</p>
    <P>Description-2</P>
  </div>
</div>
<div class="details detail-3" data-number="3">
  <div></div>
  <div>
    <p>text-3</p>
    <P>Description-3</P>
  </div>
</div>

Improve this answer
3
  • doesn't achieve much DRY'ing which seems like what OP is asking for
    – charlietfl
    Commented Jan 17, 2017 at 14:06
  • @RoryMcCrossan you could streamline your jQuery by adding one function for the text via hover on the class details, then that way the OP doesn't have to keep adding the same colors every function
    – CalvT
    Commented Jan 17, 2017 at 14:26
  • @CalvT true, although it's pretty moot as CSS is by far the better option here no matter how much the JS could be reduced by - which is why I left that snippet hidden :)
    – Rory McCrossan
    Commented Jan 17, 2017 at 14:43
0

First, notice that the elementID is a string. You can rephrase your functions by wrapping the repeated code into it's own function and passing the elementID in. That will reduce you cut and paste code.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.