1

Given the following html structure:

   <ul>
      <li id = "li1" onclick="click('...');">
    <div class="card-container">
      <div class="card">
        <div class="front">
            <img class = "track_image" src="..." />
        <div class = "track_title">title</div>
        <div class = "artist_name">name</div>
        <div class = "release_date">date</div>
        <a  class = "visit_website_anchor" href="..."><img id = "visit_website" data-displayed="yes" src=.../></a>
        </div>
        <div class="back" data-displayed = "no">
          <img class = "track_image" src=... />
          <div class = "audio_controls">
        <audio controls></audio>
          </div>
        </div>
      </div>  
    </div>
      </li>
    </ul>

Then if I click anywhere on the list item apart from the images then it gets displayed in a dimmed state, I'm not adding this so the browser is adding it. However if I click on the track_image class the list item does not get dimmed. Why does it do it for the other items but not for this one?

4

1 回答 1

0

父<LI>元素有一个onClick处理程序，当用户在 webkit 浏览器中单击它时，它将改变它的行为，尝试对其应用以下样式：

-webkit-tap-highlight-color: rgba(0,0,0,0);

来自Apple 开发者库：

“覆盖当用户在 iPhone 上的 Safari 中点击链接或 JavaScript 可点击元素时显示的突出显示颜色。

如果指定，此属性服从 alpha 值。如果您不指定 alpha 值，iPhone 上的 Safari 会为颜色应用默认的 alpha 值。要禁用点击突出显示，请将 alpha 值设置为 0（不可见）。如果将 alpha 值设置为 1.0（不透明），则点击时元素不可见。”

于 2012-09-27T09:17:42.497 回答