마우스를 올리면 표시되는 이미지가 바로 옆에 표시됩니다.

Question

도움이 될 것입니다. 현재로서는 다음과 같습니다. 왼쪽의 이미지 위로 마우스를 가져 가면 div가 오른쪽에 표시되고 왼쪽/오른쪽으로 토글됩니다. 그러나, 내 페이지에 4 개가 필요합니다. 나머지 하나 위에 마우스를 올리면 같은 방법으로 어떻게 분리 할 수 ​​있습니까? 아니면 더 좋은 방법이 있습니다. 즉. 함수 표시/숨기기 ... Jquery를 사용하면 어떻게됩니까? 나는 여러 곳을 수색했으며 아무도 내가 필요한 것을 표시하지 않습니다. 고맙습니다.

$(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>

Answer 1

당신은 당신이 바로 이미지 옆의와 클래스 .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>

Answer 2

매개 변수로 ".box"으로 .next()을 사용할 수 있습니다 그것은 클래스 .box을 한 다음

을 모두에 애니메이션을 적용되는 모든 HTML 요소를 선택합니다 그것은 당신이

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

를 사용할 때하기 때문에 귀하의 경우에는 작동하지 않습니다

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

같은기능

$(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>

Answer 3

상자가 이미지 태그의 형제이기 때문에. 이미지와 상자를 다른 부모 태그로 둘러 쌀 수 있고 이미지 태그에서 부모를 참조하여 상자를 찾아 애니메이션으로 나타낼 수 있습니다. 그러나 다음 코드를 통해 이미지에 대한 다음 상자를 직접 찾을 수 있습니다.

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

정상적으로 작동합니다. 그것을 위로 투표하십시오

Answer 4

당신은 이것을하기 위하여 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>