0

Facebook と Twitter へのリンクがいくつかありますが、これらのリンクは画像です。これらのリンクにカーソルを合わせると、これらのリンクが明るくなるようにします。2つの画像を作成し、画像リンクにカーソルを合わせると画像が変わるようにすることでこれを行うことができると考えていました. これはそれを行うための最良の方法ですか？この方法でそれを行う方法についての助けが見つかりませんでした。

ここに私のHTMLがあります:

<div class="social">

 <a href="https://www.facebook.com/seth.urquhart?sk=wall&v=wall">
  <img src="../img/facebook_logo_extended.jpg"/>
 </a>

</div>

<br>

<div class="social">

 <a href="https://twitter.com/SethUrquhart">
  <img src="../img/twitter_logo_extended.jpg"/>
 </a>

</div>

ここに私のCSSがあります:

p {
color: #232323;
text-indent:0px;
margin-left:30px;
padding-right: 30px;
}

ul  {
text-align: center;
color: gray;
}

ul a {
text-decoration: none;
color: black;
}

ul a:hover {
text-decoration: underline;
    margin-right: auto;
margin-left: auto;
}

html {
background: #e8e9e1;
}

h1 {
text-align: center;
}

body {
font-family: sans-serif;
color: #232323;
}

.wrap {
min-width: 600px;
width: 1200px;
margin: auto;
height: 100px;
text-align: center;
background-color: none;
}

.content {
background: #ffffff;
width: 900px;
margin-left: auto; 
margin-right:auto; 
height: auto;
text-indent: 50px;
}

.footer {
text-align: center;
background-color: #383838;
width: 900px;
margin-left: auto;
margin-right: auto;
color: #e8e9e1;
}

.social {
width: 900px;
margin: auto;
height: 100px;
text-align: center;
background-color: none;
}

.social:hover {
margin-right: auto;
margin-left: auto;
background:#cccccc;
color:#000;
}

ul#list-nav {
padding: 0;
list-style: none;
width: 605px; 
margin: 0 auto;
}

ul#list-nav li {
display:inline;
}

ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:150px;
background:#383838;
color:#eee;
float:left;
border-left:1px solid #fff;
}

ul#list-nav li a:hover {
margin-right: auto;
margin-left: auto;
background:#cccccc;
color:#000;
}
4

3 に答える 3

2

CSS3 を使用する意思があると仮定して、アイコンの幅を広げる効果を簡単に得る 1 つの方法を示す例を作成しました(これが質問での「密」の意味だと思います)。ここに削減されたコード：

.icon {
  -webkit-transition: 0.25s;
  transition: 0.25s;
}

.icon:hover {
  position: relative;
  z-index: 1;
  transform: scale(1.7);
  -ms-transform: scale(1.7); /* IE 9 */
  -webkit-transform: scale(1.7); /* Safari and Chrome */
}

サポートが充実しているtransform物件です。の効果transitionはあまりサポートされていません (IE9 はサポートされていません) が、グレースフル デグレーションを考えているのであれば、それを使用することは非常に有効だと思います。

編集

将来他の人に役立つ可能性があるため、この回答を更新しています。受け入れられた答えは正しいアプローチではありません.CSSが適切なツールであるスタイリングに関することを行うために目障りなJavaScriptを使用しているためです。OPがここを見て、コードを変更することを本当に願っています。

OPのフィードバックに基づいて、IE6-8を使用してフォールバックを使用してプロパティを変更することにより、シミュレートされた輝度効果を取得する方法を示す例を更新しました。要するに、コードは次のとおりです。opacityfilter

.icon {
  opacity: 1;
  filter: Alpha(Opacity=100);
}

.icon:hover {
  opacity: .6;
  filter: Alpha(Opacity=60);
}

background-color親の要素が要素よりも軽い場合は簡単で、非常にうまく機能します。もっと手の込んだものが必要な場合 (2 つの画像を変更したい場合) は、CSS スプライトを使用することを強くお勧めします。

于 2012-12-04T01:49:39.740 に答える
1

高密度とはどういう意味かわかりませんが、onmouseoverを使用して任意の画像プロパティを変更し、onmouseoutを使用して復元できます。これを行う方法を示すコードスニペットを次に示します。このコードは、マウスがその上にあるときに画像を調光し、マウスが離れたときに画像を復元するだけです。

<img 
    src = "test.jpg" 
    style = "width:50%;" 
    id = "test" 
    onmouseover = "document.getElementById('test').style.opacity=0.5"
    onmouseout = "document.getElementById('test').style.opacity=1" />

ホバー時に画像を大きくしたい場合は、サイズ属性のいずれかを変更します。たとえば、これは特に劇的なサイズのジャンプです。

<img 
    src = "test.jpg" 
    style = "width:50%;" 
    id = "test" 
    onmouseover = "document.getElementById('test').style.width='75%'"
    onmouseout = "document.getElementById('test').style.width='50%'" />

上記は説明のみを目的としていることに注意してください。これを行う方法は他にもありますが、私が提示した方法が最良であるとか、良い方法でさえあると言っているわけではありません。ただし、それは明らかであり、これがどのように行われるかを明確に見てほしいだけです。

于 2012-12-04T01:16:10.837 に答える