Question

我有一个应用程序，当鼠标被放置在我想要类似的图像生长效果与键盘事件，即焦点/模糊而不是鼠标悬停/鼠标移动时逐渐增长图像。

这是我的鼠标悬停/鼠标移动图像代码： demo

我希望用键盘事件完成相同的操作，所以我将图像放在按钮内并用焦点/模糊替换mouseover / mouseout它确实有效，但是鼠标悬停/鼠标移动按钮内的图像。我很困惑请帮忙。 demo1

Answer 1

如果您不介意解决方法（因为您无法直接focus图像元素）：

<a href="#" class="foci"><img src="something.png" /></a>

使用以下CSS：

a.foci {
    cursor: default;
}
img {
    display: block;
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    background-color: #ffa;
}
a:focus img {
    width: 200px;
    height: 200px;
}

JS Fiddle demo

已编辑以提供jQuery动画效果：

$('a:has(img)').focus(
    function(){
        $(this).find('img').animate(
            {
                'width': '200px',
                'height': '200px'
            }, 1500);
    });
$('a:has(img)').blur(
    function(){
        $(this).find('img').animate(
            {
                'width': '100px',
                'height': '100px'
            }, 1500);
    });

JS Fiddle demo

Answer 2

您无法对图像进行“对焦”。只有具有输入的表单元素才能成为键盘的焦点，因此图像不能成为焦点或模糊事件的原因。

图像增长效果与键盘事件

2 个答案: