スケールハイパーリンクの遷移が機能しない

Question

ハイパーリンクに含まれる画像の縮尺を変更したいと思います。これはすべてdivに含まれています。私は何かを書いたが、うまくいかない。画像をハイパーリンクにする必要があるのは、ユーザーを別のページにリダイレクトする必要があるためです。

Jsfiddle

#logoemailcol { 
 
    position: relative; 
 
    cursor: pointer; 
 
    -webkit-transition: all 0.5s; 
 
    transition: all 0.5s; 
 
} 
 
#logoemailcol:hover #logoem { 
 
    -webkit-transform: scale(1.15); 
 
    transform: scale(1.15); 
 
}

<div id="logoemailcol"> 
 
    <a href="" id="logoem" target="_blank"> 
 
    <img src="https://cdn1.iconfinder.com/data/icons/simple-icons/2048/email-2048-black.png" style="width: 30px; height: 30px;"> 
 
    </a> 
 
</div>

Answer 1

アンカー要素は、デフォルトでinlineと仕様に従って、要素がそれにするためにブロックレベル又は原子インラインレベルの要素でなければならないので、期待通りに動作しません"transformable"となります。

したがって、予想通りに動作させるには、要素のdisplayをinline-blockまたはblockに変更する必要があります。そうすることで、値inline-blockは要素をatomic inline-level elementとしてレンダリングするため、要素は定義によって"transformable"になります。もちろん

Updated Example

#logoemailcol { 
 
    position: relative; 
 
    cursor: pointer; 
 
} 
 
#logoemailcol:hover #logoem { 
 
    transform: scale(1.15); 
 
} 
 
#logoem { 
 
    display: inline-block; 
 
    transition: all 0.5s; 
 
}

<div id="logoemailcol"> 
 
    <a href="" id="logoem" target="_blank"> 
 
    <img src="https://cdn1.iconfinder.com/data/icons/simple-icons/2048/email-2048-black.png" style="width: 30px; height: 30px;"> 
 
    </a> 
 
</div>

それははそれがwasn理由しかし、私は同じようにに理由を提供しています、blockレベルであるので、あなたはまた、親要素に変換を適用することができアンカー要素のために働いていません。参考

：

CSS Transforms Module Level 1 - Terminology - Transformable Element

変形要素は、これらのカテゴリのいずれかの要素である：

• そのレイアウトのいずれかであるCSSボックスモデルによって支配される要素block-levelまたはatomic inline-level element、またはdisplay propertyがtable-row、table-row-group、table-header-group、table-footer-group、table-cellまたはtable-captionに計算される
• SVG名前空間内の要素で、transform、 'patternTransform'またはgradientTransformという属性を持つCSSボックスモデルによって管理されていない要素。

Answer 2

あなたは、画像を拡大縮小して移行します。

#logoemailcol{ 
 
    position: relative; 
 
    cursor: pointer; 
 
    -webkit-transition: all 0.5s; 
 
    transition: all 0.5s; 
 
} 
 

 
#logoem img { 
 
    transition: all 0.5s; 
 
} 
 

 
#logoemailcol:hover #logoem img{ 
 
    -webkit-transform: scale(1.15); 
 
    transform: scale(1.15); 
 
}

<div id="logoemailcol"> 
 
    <a href="" id="logoem" target="_blank"><img src="https://cdn1.iconfinder.com/data/icons/simple-icons/2048/email-2048-black.png" style="width: 30px; height: 30px;"></a> 
 
</div>