Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
jQuery mouseenter
Halo gan! saya mau bertanya nih, saya punya kode html seperti ini :
<div class="row">
<div class="col-xs-12 col-sm-3 services" style="margin-top: 25px;">
<div class="service-box">
<div class="icon-services">
<i class="fa fa-code"></i>
</div>
<div class="info-services">
<h3>Clean Code</h3>
<p>You will begin to realise why this exercise is called the Dickens Pattern (with reference to the ghost showing Scrooge some different futures) as you notice that the idea of this exercise is to hypnotize yourself to be aware
of two....</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3 services" style="margin-top: 25px;">
<div class="service-box">
<div class="icon-services">
<i class="fa fa-cogs"></i>
</div>
<div class="info-services">
<h3>Trending Design</h3>
<p>You will begin to realise why this exercise is called the Dickens Pattern (with reference to the ghost showing Scrooge some different futures) as you notice that the idea of this exercise is to hypnotize yourself to be aware
of two....</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3 services" style="margin-top: 25px;">
<div class="service-box">
<div class="icon-services">
<i class="fa fa-tablet"></i>
</div>
<div class="info-services">
<h3>Responsive</h3>
<p>You will begin to realise why this exercise is called the Dickens Pattern (with reference to the ghost showing Scrooge some different futures) as you notice that the idea of this exercise is to hypnotize yourself to be aware
of two....</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3 services" style="margin-top: 25px;">
<div class="service-box">
<div class="icon-services">
<i class="fa fa-rocket"></i>
</div>
<div class="info-services">
<h3>App Design</h3>
<p>You will begin to realise why this exercise is called the Dickens Pattern (with reference to the ghost showing Scrooge some different futures) as you notice that the idea of this exercise is to hypnotize yourself to be aware
of two....</p>
</div>
</div>
</div>
</div>
Saya pengen ketika cursor berada di "col-xs-12 col-sm-3 services", "icon-services" berubah warna. Lalu saya pakai jquery mouseenter, tetapi ketika cursor berada di "col-xs-12 col-sm-3 services" yang pertama malah semua "icon-services" berubah warna.
Pertanyaan: Bagaimana caranya agar ketika cursor berada di "col-xs-12 col-sm-3 services" yang pertama, maka "icon-services" yang pertama berubah warna (bukan yang lain)?
Note: Maaf jika penjelasan terlalu panjang :)
6 Jawaban:
Disamping class tambah id aja gan, class itu utk rame2. Kalo id untuk sendiri. Jd satu persatu nanti on mouse enternya pake selector id bukan class
terima kasih gan! @mltobing
bisa sih, div "col-xs-12 col-sm-3 services" dan "icon-services" nya pake id. Tetapi terlalu panjang di jquery nya jadi seperti ini :
$(document).ready(function(){
$('#one').mouseenter(function(){
$('#icon-one').css("color", "#4db6ac");
$('#icon-one').css("border", "2px #4db6ac solid");
});
$('#one').mouseleave(function(){
$('#icon-one').css("color", "#000");
$('#icon-one').css("border", "2px #000 solid");
});
// two
$('#two').mouseenter(function(){
$('#icon-two').css("color", "#4db6ac");
$('#icon-two').css("border", "2px #4db6ac solid");
});
$('#two').mouseleave(function(){
$('#icon-two').css("color", "#000");
$('#icon-two').css("border", "2px #000 solid");
});
// three
$('#three').mouseenter(function(){
$('#icon-three').css("color", "#4db6ac");
$('#icon-three').css("border", "2px #4db6ac solid");
});
$('#three').mouseleave(function(){
$('#icon-three').css("color", "#000");
$('#icon-three').css("border", "2px #000 solid");
});
// four
$('#four').mouseenter(function(){
$('#icon-four').css("color", "#4db6ac");
$('#icon-four').css("border", "2px #4db6ac solid");
});
$('#four').mouseleave(function(){
$('#icon-four').css("color", "#000");
$('#icon-four').css("border", "2px #000 solid");
});
});
apakah ada yg lebih efektif?
Saya kurang tau juga gan, coba begini
$("#one,#two,#three,#four").each(function() {
$(this).mouseenter(function() {
//di bagian ini yg saya ragu
// $("#icon-one,#icon-two,#icon-three,#icon-four").each(function() {
// $(this).css("color", "#000");
// $(this).css("border", "2px #000 solid");
// }
});
//disini on mouseleave
});
Jawaban Terpilih
harus pake javascript gan? kenapa ga pake CSS aja?
tambahkan ':hover' rule ke class 'services', tapi disertakan juga child divnya hingga ke '.icon-services'
.services:hover .service-box .icon-services {
color: #4db6ac;
border: 2px #4db6ac solid;
}
kalo begini tanpa id pun bisa, karena hover sendiri hanya diaplikasikan pada elemen services yang tertuju mouse, bukan semua class services.
Nah...ini ada yg lebih simple punya mas @rachmatsasongko