CSS 호버, 원래 크기로 돌아 가지 않음

Question

이미지 위로 마우스를 가져 가면 크기가 변경되지만 커서를 옮길 때 원래 크기로 돌아갑니다. JS없이 원래 크기로 돌아 가지 않도록 할 수 있습니까? 예 : 높이 : 200px (마우스 오버 높이 : 400px) 커서를 높이로 이동하면 높이가 400 픽셀로 유지됩니다.

#camera{ 
     height:280px; 
     width:400px; 
     transition: width 0.5s, height 0.5s, transform 0.5s; 
     overflow:hidden; 
} 
#camera:hover{ 
       height:450px; 
       width:700px; 
       transition: width 0.5s, height 0.5s, transform 0.5s; 
} 

Answer 1

당신은 단순히 jQuery 코드를 사용할 수 있습니다 : 당신은 당신이 이런 식으로 jQuery를 함께 원하는 것을 달성 할 수있는 당신이 체크 박스로 재생하는 경우

$(document).on('mouseover','#camera', function(){ 
    $(this).css("width", "450px"); 
}); 

DEMO

Answer 2

당신은 CSS 만 사용하여이를 달성 할 수 있습니다! CSS는 상태를 확인하고 당신은 말했다. 내 이미지가 기본 상태 일 때 내 이미지가 "HOVER"상태 일 때이 작업을 수행합니다. {...}.

기본적으로 이미지는 사용자가 선언 한 두 상태를 전환합니다.

이

<img class="myImage" src="...."> 

<script> 
$('.myImage).hover(function(){ 
    $(this).css(width, "300px"); 
}); 
</script> 

Answer 3

실제로 방법이 자사을 실제로 눈에 보이지 않습니다. 마우스를 올리면 클릭 이벤트가 사용됩니다.

이 솔루션은 Javascript 또는 JQuery 또는 HTML과 CSS 만 사용합니다.

Here is a working example.

HTML

<input type="checkbox" id="myoption_01_item" name="myoption" /> 
<label for="myoption_01_item"> 
    <img src="http://www.funchap.com/wp-content/uploads/2014/05/help-dog-picture.jpg" border="0" /> 
</label> 

CSS

input[type="checkbox"][name="myoption"][id^="myoption_"][id$="_item"] { 
    display: none; 
} 
input[type="checkbox"][name="myoption"][id^="myoption_"][id$="_item"]:not(:checked) + label img { 
    width: 200px; 
    height: 180px; 

    -webkit-transition: width .200s ease-in-out, height .200s ease-in-out; 
    -moz-transition: width .200s ease-in-out, height .200s ease-in-out; 
    -ms-transition: width .200s ease-in-out, height .200s ease-in-out; 
    -o-transition: width .200s ease-in-out, height .200s ease-in-out; 
    transition: width .200s ease-in-out, height .200s ease-in-out; 
} 
input[type="checkbox"][name="myoption"][id^="myoption_"][id$="_item"]:checked + label img { 
    width: 250px; 
    height: 230px; 

    -webkit-transition: width .200s ease-in-out, height .200s ease-in-out; 
    -moz-transition: width .200s ease-in-out, height .200s ease-in-out; 
    -ms-transition: width .200s ease-in-out, height .200s ease-in-out; 
    -o-transition: width .200s ease-in-out, height .200s ease-in-out; 
    transition: width .200s ease-in-out, height .200s ease-in-out; 
}