Question

当我将鼠标悬停在图像上时，它会改变大小，但当我将光标移开时，它会恢复原始大小。是否可以防止返回原始大小（没有JS）？示例：height：200px 悬停高度：400px，当我移动光标时，高度保持在400px。

#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

实际上如果你玩一个实际上对眼睛不可见的复选框，有一种方法。这将使用click事件而不是悬停状态。

此解决方案不使用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;
}

Answer 2

你只能通过使用CSS来实现这一目标！ CSS检查状态，你说过。当我的图像处于默认状态时，执行此操作，当我的图像处于状态时＃HO; HOVER＆＃34;做这个 {...}。

所以基本上你的图像在你声明的那两个状态之间切换。你可以用这样的jQuery实现你想要的东西：

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

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

Answer 3

您可以简单地使用jQuery代码：

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

DEMO

CSS悬停，不要返回原始大小

3 个答案: