懸停圖像顯示div右側

任何幫助，將不勝感激！截至目前，我有以下...當你將鼠標懸停在左側的圖像上時，div顯示在其旁邊並左右切換。但是，當我將鼠標懸停在另一頁上時，我的頁面上需要四個，其餘的則如何分開？還是有更好的方法...即。顯示/隱藏功能...我將如何使用JQuery來解決這個問題？我搜索了幾個地方，沒有顯示我需要什麼。謝謝。懸停圖像顯示div右側

$(document).ready(function(){ 
 
    $(".slide-toggle").hover(function(){ 
 
    $(".box").animate({ 
 
     width: "toggle" 
 
    }); 
 
    }); 
 
});

.slide-toggle { 
 
    float:left; 
 
} 
 
.box{ 
 
    float:left; 
 
    overflow: hidden; 
 
    background: #f0e68c; 
 
} 
 
.box-inner{ 
 
    width: 100px; 
 
    height:30px; 
 
    padding: 10px; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img class="slide-toggle" src="tree.png" width="50" height="50"> 
 
<div class="box"> 
 
    <div class="box-inner">Lorem ipsum dolor sit amet...</div> 
 
</div>

來源

2016-12-05 lizmart

出現這種情況的原因是因爲'$動畫（）'將動畫**與類名‘框中的’EVERY **元。同樣，'$（「。slide-toggle」）。hover（）'會將此操作添加到** EVERY **元素中，類名稱爲「slide-toggle」。 **因此，每當您將鼠標懸停在任何「滑動切換」上時，每個「框」都會生成動畫。** –

@lizmart請參閱http://stackoverflow.com/help/someone-answers – guest271314

您可以使用.next()與".box"作爲參數

$(document).ready(function() { 
 
    $(".slide-toggle").hover(function() { 
 
    $(this).next(".box").animate({ 
 
     width: "toggle" 
 
    }); 
 
    }); 
 
});

.slide-toggle { 
 
    float: left; 
 
} 
 
.box { 
 
    float: left; 
 
    overflow: hidden; 
 
    background: #f0e68c; 
 
} 
 
.box-inner { 
 
    width: 100px; 
 
    height: 30px; 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img class="slide-toggle" src="tree.png" width="50" height="50"> 
 
<div class="box"> 
 
    <div class="box-inner">Lorem ipsum dolor sit amet...</div> 
 
</div> 
 
<img class="slide-toggle" src="tree.png" width="50" height="50"> 
 
<div class="box"> 
 
    <div class="box-inner">Lorem ipsum dolor sit amet...</div> 
 
</div>

來源

2016-12-05 05:17:18 guest271314

它的工作原理。謝謝！ – lizmart

您可以定位旁邊的圖像與與.box類股利功能像

$(this).next('.box').animate({ 
     width: "toggle" 
    });

它不會在你的情況，因爲當你使用

$(".box").animate({ 
    width: "toggle" 
});

工作，這將選擇有一個類.box，然後所有的人

的動畫應用的所有HTML元素

$(document).ready(function(){ 
 
    $(".slide-toggle").hover(function(){ 
 
    $(this).next('.box').animate({ 
 
     width: "toggle" 
 
    }); 
 
    }); 
 
});

.slide-toggle { 
 
    float:left; 
 
} 
 
.box { 
 
    float:left; 
 
    overflow: hidden; 
 
    background: #f0e68c; 
 
} 
 
.box-inner { 
 
    width: 100px; 
 
    height:30px; 
 
    padding: 10px; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img class="slide-toggle" src="tree.png" width="50" height="50"> 
 
<div class="box"> 
 
    <div class="box-inner">Lorem ipsum dolor sit amet.</div> 
 
</div> 
 
<img class="slide-toggle" src="tree.png" width="50" height="50"> 
 
<div class="box"> 
 
    <div class="box-inner">Lorem ipsum dolor sit amet.</div> 
 
</div> 
 
<img class="slide-toggle" src="tree.png" width="50" height="50"> 
 
<div class="box"> 
 
    <div class="box-inner">Lorem ipsum dolor sit amet.</div> 
 
</div> 
 
<img class="slide-toggle" src="tree.png" width="50" height="50"> 
 
<div class="box"> 
 
    <div class="box-inner">Lorem ipsum dolor sit amet.</div> 
 
</div>

來源

2016-12-05 05:19:50

由於您的盒子是圖像標籤的兄弟。您可以將圖像和框包裝到另一個父標籤中，並將圖像標籤引用到父項，並找到框併爲其設置動畫。但是你可以通過下面的代碼直接找到下一個圖像。

$(document).ready(function(){ 
    $(".slide-toggle").hover(function(){ 
    $(this).next('.box').animate({ 
     width: "toggle" 
    }); 
    }); 
});

它會正常工作。投票它的作品

來源

2016-12-05 05:21:38

非常感謝你。 – lizmart

如果你喜歡就投票 –

你甚至不需要JavaScript或jQuery來做到這一點。你可以做到這一點在純CSS：（「框」）。

.slide-toggle { 
    float:left; 
} 
.box { 
    float:left; 
    overflow: hidden; 
    background: #f0e68c; 
} 
.box-inner { 
    width: 100px; 
    height:30px; 
    padding: 10px; 
} 
.slide-toggle:hover + .box { 
    /* use an animation or transition here to change the width */ 
} 

<img class="slide-toggle" src="tree.png" width="50" height="50"> 
<div class="box"> 
    <div class="box-inner">Lorem ipsum dolor sit amet...</div> 
</div>

來源

2016-12-05 06:45:26 Derek

懸停圖像顯示div右側

回答

相關問題