Firefoxでの.focusに関する問題

Question

私はこのカスタムレイアウトを構築しています。Firefoxでは奇妙なことが起こっています。

ご覧のとおり、タブまたはマウスでFirefoxをクリックすると、画像にフォーカスが当てられません。これはChromeで正常に動作します。彼らは画像でなければなりません。なぜなら、最終的な製品はsvgsであり、クリック可能でキーボードにアクセス可能でなければならないからです。

Here's a link to my page.

そして、ここでは

if (jQuery(window).width() > 900) { 
//Execute only when width is greater than 900px 

var circles = document.getElementsByClassName("js-circle"), 
    text = document.getElementsByClassName("js-text"), 
    buttons = document.getElementsByClassName("js-button"); 

    for (var i = 0; i < circles.length; i++) { 
    console.log("assign listeners"); 
    assignListeners(i); 
    } 

    function assignListeners(i) { 
    (function(i) { 
     circles[i].addEventListener('focus', function(e) { 
     console.log(circles[i]); 
     reveal(e, i); 
     }, false); 
     buttons[i].addEventListener('blur', function(e) { 
     hide(e, i); 
     }, false); 
    }(i)); 
    } 

    function reveal(e, i) { 
    jQuery(text[i]).fadeIn(); 

    } 

    function hide(e, i) { 
    jQuery(text[i]).fadeOut(); 
    } 

} 

Answer 1

は、多分あなたはjqueryのをスキップすることができ、私のJSコードですいくつかのあなたはどのようにimgタグに属性tabindexを設定し、CSSセレクタを使用している場合+

---

基本的にimg HTML：

<img tabindex="0" src="http://kathrynjcrawford.com/testimg.png" class="deg180 || svg-circle || js-circle" tabindex="0"> 

とCSS：

img:focus + .text-container { 
    display:block; 
} 

---

全ページを実行するためのDEMOスニペット

.bg-container { 
 
    width: 100%; 
 
    margin: 0; 
 
    background: linear-gradient(to bottom, #a7a7a7 0%, #dadada 100%); 
 
} 
 
/* neatly spaced stuff for mobile */ 
 

 
.img-container { 
 
    align-items: center; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
} 
 
.svg-circle { 
 
    background: white; 
 
    border-radius: 50%; 
 
    height: 6em; 
 
    margin-top: 2em; 
 
    width: 6em; 
 
} 
 
.svg-circle:focus { 
 
    background: red; 
 
} 
 
.text-container { 
 
    color: #e92837; 
 
    text-align: center; 
 
    max-width: 15em; 
 
} 
 
.text-container p { 
 
    color: #025a83; 
 
} 
 
.services-button { 
 
    background: #e92837; 
 
    border: none; 
 
    color: #ffffff; 
 
    font-family: Myriad Pro; 
 
    font-size: 18px; 
 
    margin-bottom: 2em; 
 
    padding: 13px 20px 12px 20px; 
 
    text-decoration: none; 
 
} 
 
.services-button:hover { 
 
    text-decoration: none; 
 
} 
 
@media screen and (min-width: 900px) { 
 
    /* centers the image container and constrains proportions */ 
 
    .img-container { 
 
    height: 50%; 
 
    margin: 1.75em auto 0; 
 
    min-height: 900px; 
 
    padding: 2.8em; 
 
    position: relative; 
 
    width: 50%; 
 
    } 
 
    /* sets circles up in center of img-container to prepare for translations */ 
 
    .svg-circle { 
 
    display: block; 
 
    left: 50%; 
 
    margin: -3em; 
 
    position: absolute; 
 
    top: 50%; 
 
    } 
 
    /* positions all text containers in the center of the img-container */ 
 
    .text-container { 
 
    display: none; 
 
    left: 0; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-top: 10em; 
 
    max-width: 15em; 
 
    position: absolute; 
 
    right: 0; 
 
    } 
 
    /* TRANSLATIONS */ 
 
    .deg0 { 
 
    transform: translate(23em); 
 
    } 
 
    .deg30 { 
 
    transform: rotate(-30deg) translate(23em) rotate(30deg); 
 
    } 
 
    .deg60 { 
 
    transform: rotate(-60deg) translate(24em) rotate(60deg); 
 
    } 
 
    .deg90 { 
 
    transform: rotate(-90deg) translate(25em) rotate(90deg); 
 
    } 
 
    .deg120 { 
 
    transform: rotate(-120deg) translate(24em) rotate(120deg); 
 
    } 
 
    .deg150 { 
 
    transform: rotate(-150deg) translate(23em) rotate(150deg); 
 
    } 
 
    .deg180 { 
 
    transform: rotate(-180deg) translate(23em) rotate(180deg); 
 
    } 
 
} 
 
img:focus + .text-container { 
 
    display: block; 
 
}

<div class="bg-container"> 
 
    <div class="img-container"> 
 
    <img tabindex="0" src="http://kathrynjcrawford.com/testimg.png" class="deg180 || svg-circle || js-circle" tabindex="0"> 
 

 
    <div class="text-container || js-text"> 
 
     <h2>Service 1</h2> 
 
     <p>I don't know what you're talking about. I am a member of the Imperial Senate on a diplomatic mission to Alderaan--</p> 
 
     <button class="js-button" type="button">Learn More</button> 
 
    </div> 
 

 
    <img tabindex="0" src="http://kathrynjcrawford.com/testimg.png" class="deg150 || svg-circle || js-circle" tabindex="0"> 
 

 
    <div class="text-container || js-text"> 
 
     <h2>Service 2</h2> 
 
     <p>I don't know what you're talking about. I am a member of the Imperial Senate on a diplomatic mission to Alderaan--</p> 
 
     <button class="js-button" type="button">Learn More</button> 
 
    </div> 
 

 
    <img tabindex="0" src="http://kathrynjcrawford.com/testimg.png" class="deg120 || svg-circle || js-circle" tabindex="0"> 
 

 
    <div class="text-container || js-text"> 
 
     <h2>Service 3</h2> 
 
     <p>I don't know what you're talking about. I am a member of the Imperial Senate on a diplomatic mission to Alderaan--</p> 
 
     <button class="js-button" type="button">Learn More</button> 
 
    </div> 
 

 
    <img tabindex="0" src="http://kathrynjcrawford.com/testimg.png" class="deg90 || svg-circle || js-circle" tabindex="0"> 
 

 
    <div class="text-container || js-text"> 
 
     <h2>Service 4</h2> 
 
     <p>I don't know what you're talking about. I am a member of the Imperial Senate on a diplomatic mission to Alderaan--</p> 
 
     <button class="js-button" type="button">Learn More</button> 
 
    </div> 
 

 
    <img tabindex="0" src="http://kathrynjcrawford.com/testimg.png" class="deg60 || svg-circle || js-circle" tabindex="0"> 
 

 
    <div class="text-container || js-text"> 
 
     <h2>Service 5</h2> 
 
     <p>I don't know what you're talking about. I am a member of the Imperial Senate on a diplomatic mission to Alderaan--</p> 
 
     <button class="js-button" type="button">Learn More</button> 
 
    </div> 
 

 
    <img tabindex="0" src="http://kathrynjcrawford.com/testimg.png" class="deg30 || svg-circle || js-circle" tabindex="0"> 
 

 
    <div class="text-container || js-text"> 
 
     <h2>Service 6</h2> 
 
     <p>I don't know what you're talking about. I am a member of the Imperial Senate on a diplomatic mission to Alderaan--</p> 
 
     <button class="js-button" type="button">Learn More</button> 
 
    </div> 
 

 
    <img tabindex="0" src="http://kathrynjcrawford.com/testimg.png" class="deg0 || svg-circle || js-circle" tabindex="0"> 
 

 
    <div class="text-container || js-text"> 
 
     <h2>Service 7</h2> 
 
     <p>I don't know what you're talking about. I am a member of the Imperial Senate on a diplomatic mission to Alderaan--</p> 
 
     <button class="services-button || js-button" type="button">Learn More</button> 
 
    </div> 
 

 
    </div> 
 

 
</div>

何クロムからこの時点で私にははるかに少ないバギーがレンダリングになります。 ）

Answer 2

Firefoxとの問題ではなく、Mac OSXの問題でした。どうやら、あなたのシステム環境設定でフルキーボードアクセス権を持っていなければ、firefoxはリンクではないものにタブしません。