Question

我正在构建这个自定义布局，我正在使用Firefox进行一些奇怪的事情。

正如您所看到的，图像无法通过标签或鼠标点击Firefox进行聚焦。这适用于Chrome。它们确实需要是图像，因为最终的产品将是svgs，它们需要可点击并且键盘可访问！

这是我的JS代码

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一些如何设置属性tabindex到img标签并使用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>

此时从Chrome渲染的内容来看，我看起来要小得多：）

Answer 2

原来问题不在于Firefox，而在于Mac OSX。显然，如果您的系统首选项中没有完整的键盘访问权限，那么firefox不会选中任何非链接的内容。

firefox中.focus的问题

2 个答案: