1

タイトルは最高ではありませんが、それをより適切に説明する方法が本当にわかりませんでした。

問題は、#navigation div にカーソルを合わせると、#content div のフォント スタイルが変更されたように見えることです。ただし、これはChromeでのみ実行されます。Opera または FireFox で表示すると、正常に動作します。

これを解決する方法を知っている人はいますか？

Ps: Ubuntu フォントは Google Fonts 経由で読み込まれます。

HTML

<body>
<div id="wrapper">
    <div id="navigation">
        <ul class="ca-menu">
            <li>
                <a href="#">
                    <span class="ca-icon">F</span>
                    <div class="ca-content">
                        <h2 class="ca-main">Home</h2>
                        <h3 class="ca-sub">Startpagina</h3>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="ca-icon">H</span>
                    <div class="ca-content">
                        <h2 class="ca-main">Portfolio</h2>
                        <h3 class="ca-sub">Websites en drukwerk</h3>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="ca-icon">N</span>
                    <div class="ca-content">
                        <h2 class="ca-main">Over Ons</h2>
                        <h3 class="ca-sub">Doel en motto</h3>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="ca-icon">K</span>
                    <div class="ca-content">
                        <h2 class="ca-main">Contact</h2>
                        <h3 class="ca-sub">Adresgegevens</h3>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <div id="content">
        <h1>Home - Portfolio - Over Ons - Contact</h1>
        <p>
            <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </a>
            Quisque sed ligula vitae erat sollicitudin gravida. 
            Fusce adipiscing fringilla nibh ut feugiat. 
            In hac habitasse platea dictumst. 
            Donec ut nisi in dolor luctus eleifend. 
            Vivamus eleifend suscipit ipsum vitae posuere. 
            Morbi vestibulum erat eu nulla aliquet sagittis quis tempor lorem. 
            Sed orci nunc, dapibus eu cursus sit amet, fringilla a sapien. 
            Nullam non massa nunc.
        </p>
    </div>
</div>

CSS

body {
background: url('../images/noise.png') rgba(51, 51, 51, 1);
width: 100%;
height: 100%;
overflow-y: scroll;
}
#content h1, h2, h3 {
font-family: Ubuntu, sans-serif;
}
#content h1 {
color: rgba(0, 135, 255, 1);
font-size: 32px;
font-weight: bold;
margin: 4px;
border-left: 50px solid rgba(0, 135, 255, 1);
line-height: 36px;
}
#content h2 {
color: rgba(77, 184, 255, 1);
font-size: 24px;
font-weight: bold;
margin: 4px;
border-left: 50px solid rgba(77, 184, 255, 1);
line-height: 28px;
}
#content h3 {
color: rgba(130, 205, 255, 1);
font-size: 18px;
font-weight: bold;
margin: 4px;
border-left: 50px solid rgba(130, 205, 255, 1);
line-height: 22px;
}
#content p {
color: rgba(0, 0, 0, 1);
font-size: 16px;
margin: 4px;
font-family: Ubuntu, sans-serif;
line-height: 20px;
}
#content a {
color: rgba(0, 0, 0, 1);
text-decoration: none;
border-bottom: 1px dashed rgba(0, 0, 0, 1);
transition:         all 300ms ease;
-webkit-transition: all 300ms ease;
-moz-transition:    all 300ms ease;
-o-transition:      all 300ms ease;
}
#content a:hover {
border-bottom: 1px dashed rgba(130, 205, 255, 1);
color: rgba(130, 205, 255, 1);
}
#wrapper {
margin: 10px auto;
padding: 0;
width: 940px;
height: 100%;
}
#navigation {
position: relative;
width: 220px;
height: 415px;
margin: 0 10px 0 0;
float: left;
}
@font-face {
font-family: 'WebSymbolsRegular';
src: url('websymbols.woff');
font-weight: normal;
font-style: normal;
}
.ca-menu{
padding: 0;
margin: 0 auto;
width: 220px;
}
.ca-menu li{
width: 220px;
height: 100px;
overflow: hidden;
position: relative;
display: block;
background: rgba(255, 255, 255, 1);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
margin-bottom: 5px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.ca-menu li:last-child{
margin-bottom: 0px;
}
.ca-menu li a{
text-align: left;
width: 100%;
height: 100%;
display: block;
position: relative;
}
.ca-icon{
color: rgba(0, 0, 0, 1);
font-family: 'WebSymbolsRegular', cursive;
font-size: 24px;
text-shadow: 0px 0px 1px rgba(51, 51, 51, 1);
line-height: 100px;
position: absolute;
width: 70px;
left: 0px;
text-align: center;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.ca-content{
position: absolute;
left: 65px;
width: 370px;
height: 60px;
top: 32px;
}
.ca-main{
font-size: 24px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
font-family: Ubuntu, sans-serif;
color: rgba(77, 184, 255, 1);
}
.ca-sub{
font-size: 14px;
color: rgba(102, 102, 102, 1);
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
font-family: Ubuntu, sans-serif;
}
.ca-menu li:hover{
background: rgba(130, 205, 255, 1);
}
.ca-menu li:hover .ca-icon{
font-size: 36px;
color: rgba(130, 205, 255, 1);
opacity: 0.8;
text-shadow: -1px -1px 5px rgba(255, 255, 255, 1), 1px 1px 5px rgba(255, 255, 255, 1);
}
.ca-menu li:hover .ca-main{
opacity: 1;
color: rgba(51, 51, 51, 1);
-webkit-animation: moveFromTop 300ms ease-in-out;
-moz-animation: moveFromTop 300ms ease-in-out;
-ms-animation: moveFromTop 300ms ease-in-out;
}
.ca-menu li:hover .ca-sub{
opacity: 1;
-webkit-animation: moveFromBottom 300ms ease-in-out;
-moz-animation: moveFromBottom 300ms ease-in-out;
-ms-animation: moveFromBottom 300ms ease-in-out;
}
@-webkit-keyframes moveFromBottom {
from {
    opacity: 0;
    -webkit-transform: translateY(200%);
}
to {
    opacity: 1;
    -webkit-transform: translateY(0%);
}
}
@-moz-keyframes moveFromBottom {
from {
    opacity: 0;
    -moz-transform: translateY(200%);
}
to {
    opacity: 1;
    -moz-transform: translateY(0%);
}
}
@-ms-keyframes moveFromBottom {
from {
    opacity: 0;
    -ms-transform: translateY(200%);
}
to {
    opacity: 1;
    -ms-transform: translateY(0%);
}
}

@-webkit-keyframes moveFromTop {
from {
    opacity: 0;
    -webkit-transform: translateY(-200%);
}
to {
    opacity: 1;
    -webkit-transform: translateY(0%);
}
}
@-moz-keyframes moveFromTop {
from {
    opacity: 0;
    -moz-transform: translateY(-200%);
}
to {
    opacity: 1;
    -moz-transform: translateY(0%);
}
}
@-ms-keyframes moveFromTop {
from {
    opacity: 0;
    -ms-transform: translateY(-200%);
}
to {
    opacity: 1;
    -ms-transform: translateY(0%);
}
}
#content {
position: relative;
width: 700px;
margin: 0 0 0 10px;
padding: 0;
float: right;
}
4

0 に答える 0