私のCSSには本当に小さな問題があります。私のテキストはまったく見栄えがよくありません。他のボタンで行ったのとほぼ同じスタイル (CSS と Java 効果を追加) を使用しました (他のボタンは見栄えがします)。テキストに関する限り、私のスタイリングを完全に無視しているようです。
私のテキストは一番上にあるように見え、追加したシャドウやスタイリングなしで下線が引かれています...ここに私のstyle.cssがあります：
.ib-container{
position: relative;
margin: 30px auto;
}
.ib-container:before,
.ib-container:after {
content:"";
display:table;
}
.ib-container:after {
clear:both;
}
.ib-container article{
-moz-box-shadow:inset 0px 1px 0px 0px #fce2c1;
-webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1;
box-shadow:inset 0px 1px 0px 0px #fce2c1;
background-color: #dd4814;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:12px;
color:#ffffff;
border:1px solid #dd4814;
font-family:Ubuntu, sans-serif;
font-weight:bold;
height: 65px;
width: 65px;
padding:6px 6px;
text-decoration:none;
text-shadow:1px 1px 0px #dd4800;
text-align: center;
vertical-align:middle;
z-index: 1;
-webkit-backface-visibility: hidden;
-webkit-transition:
opacity 0.5s linear,
-webkit-transform 0.5s ease-in-out,
box-shadow 0.5s ease-in-out;
-moz-transition:
opacity 0.5s linear,
-moz-transform 0.5s ease-in-out,
box-shadow 0.5s ease-in-out;
-o-transition:
opacity 0.5s linear,
-o-transform 0.5s ease-in-out,
box-shadow 0.5s ease-in-out;
-ms-transition:
opacity 0.5s linear,
-ms-transform 0.5s ease-in-out,
box-shadow 0.5s ease-in-out;
transition:
opacity 0.5s linear,
transform 0.5s ease-in-out,
box-shadow 0.5s ease-in-out;
margin-left: 5px;
margin-top: 5px;
display:inline-block
}
.ib-container article p{
-webkit-transition:
opacity 0.2s linear,
text-shadow 0.7s ease-in-out,
color 0.7s ease-in-out;
-moz-transition:
opacity 0.2s linear,
text-shadow 0.7s ease-in-out,
color 0.7s ease-in-out;
-o-transition:
opacity 0.2s linear,
text-shadow 0.7s ease-in-out,
color 0.7s ease-in-out;
-ms-transition:
opacity 0.2s linear,
text-shadow 0.7s ease-in-out,
color 0.7s ease-in-out;
transition:
opacity 0.2s linear,
text-shadow 0.7s ease-in-out,
color 0.7s ease-in-out;
text-align: center;
vertical-align:middle;
}
/* Hover Style for all the items: blur, scale down*/
.ib-container article.blur{
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-o-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
opacity: 0.7;
text-align: center;
vertical-align:middle;
}
/* Hover Style for single item: scale up */
.ib-container article.active{
box-shadow: 0px 0px 5px 2px rgba(255,255,255,1);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
z-index: 100;
opacity: 1;
text-align: center;
vertical-align:middle;
}
これが私のhtmlです...私が何を意味するのかについて十分に明確でない場合は、お知らせください...基本的には、スタイルが設定されていないように見えます。
<!DOCTYPE html>
<style type="text/css">
body {
font-family:verdana,arial,sans-serif;
font-size:10pt;
margin:10px;
background-color:#000000;
background-image:url('http://www.wallsave.com/wallpapers/2560x1600/fedora/377491/fedora-ubuntu-heavy-metal-distrotest-377491.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:-1750px;
}
a {
color:white;
}
</style>
<style>
body{font-family: Ubuntu, sans-serif; }</style><link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Item Blur Effect with CSS3 and jQuery - Using Box Shadows, Transform and Transitions" />
<meta name="keywords" content="blur, css3, transition, jquery, box shadow, text shadow, articles, scale, transform, animation" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/modernizr.custom.34978.js"></script>
</head>
<body>
<div class="container">
<section class="ib-container" id="ib-container">
<article>
<a target="_blank" href="http://mail.xxx.com/~bcluff/knowledge/support/">home.</a>
</article>
<article>
<a target="_blank" href="http://gmail.com/">gmail.</a>
</article>
<article>
<a target="_blank" href="http://knowledge.xxx.com/">knowledge.</a>
</article>
<article>
<a target="_blank" href="https://utopia.xxxasp.com/login.php?redirect_location=https%3A%2F%2Futopia.xxxasp.com%2F">utopia.</a>
</article>
<article>
<a target="_blank" href="https://webmail.xxxasp.com/plugins/make_pass/makepass_prompt.php">password.</a>
</article>
<article>
<a target="content" href="http://mail.xxx.com/~bcluff/knowledge/support/extensionlist/">extensions.</a>
</article>
<article>
<a target="content" href="http://ip.xxx.com/read_sites.php">viewsites.</a>
</article>
<article>
<a target="_blank" href="http://mail.xxx.com/~bcluff/knowledge/support/oldsite">classic view.</a>
</article>
</section>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var $container = $('#ib-container'),
$articles = $container.children('article'),
timeout;
$articles.on( 'mouseenter', function( event ) {
var $article = $(this);
clearTimeout( timeout );
timeout = setTimeout( function() {
if( $article.hasClass('active') ) return false;
$articles.not( $article.removeClass('blur').addClass('active') )
.removeClass('active')
.addClass('blur');
}, 65 );
});
$container.on( 'mouseleave', function( event ) {
clearTimeout( timeout );
$articles.removeClass('active blur');
});
});
</script>
</body>
</html>