时间戳

首页 > 解决方案 > 每个 SVG 下方的可点击空白

html - 每个 SVG 下方的可点击空白

问题描述

每个 SVG 下方都有可点击的空白。

意思是，当单击该区域时，什么也没有发生，也没有视频打开。

框内的整个区域都应该是可点击的。

代码：https ://jsfiddle.net/fzLcpjrb/

另外，当您将鼠标悬停在该区域上时，为什么会有 2 个不同的鼠标光标？

这一切将如何解决？

如果那是问题所在，那么 html 中没有正确写入什么？

在此处输入图像描述

const load = (function makeLoad() {
   "use strict";

   function _load(tag) {
      return function (url) {
         return new Promise(function (resolve) {
            const element = document.createElement(tag);
            const parent = "body";
            const attr = "src";
            element.onload = function () {
               resolve(url);
            };
            element[attr] = url;
            document[parent].appendChild(element);
         });
      };
   }
   return {
      js: _load("script")
   };
}());

const videoPlayer = (function makeVideoPlayer() {
   "use strict";
   const players = [];
   let playerVars = {};

   function onPlayerReady(event) {
      const player = event.target;
      player.setVolume(100); // percent
   }

   let hasShuffled = false;

   function onPlayerStateChange(event) {
      const player = event.target;
      if (!hasShuffled) {
         player.setShuffle(true);
         player.playVideoAt(0);
         hasShuffled = true;
      }
      if (event.data === YT.PlayerState.PLAYING) {
         for (let i = 0; i < players.length; i++) {
            if (players[i] !== event.target) players[i].pauseVideo();
         }
      }

      if (playerVars.loop && event.data === YT.PlayerState.ENDED) {
         player.seekTo(playerVars.start);
      }
   }

   function addVideo(video, settings) {
      playerVars = Object.assign({
         videoId: video.dataset.id,
         host: "https://www.youtube-nocookie.com",
         events: {
            "onReady": onPlayerReady,
            "onStateChange": onPlayerStateChange
         }
      }, settings);
      players.push(new YT.Player(video, playerVars));
   }

   function init(video, settings) {
      load.js("https://www.youtube.com/player_api").then(function () {
         YT.ready(function () {
            addVideo(video, settings);
         });
      });
   }
   return {
      init
   };
}());

function loadPlayer(opts) {
   "use strict";

   function show(el) {
      el.classList.remove("hide");
   }

   function initPlayer(wrapper) {
      const video = wrapper.querySelector(".video");
      opts.width = opts.width || 198;
      opts.height = opts.height || 198;
      opts.autoplay = 1;
      opts.controls = 1;
      opts.rel = 0;
      opts.enablejsapi = 1;
      opts.iv_load_policy = 3;
      opts.fs = 0;
      opts.disablekb = 1;

      function paramInOpts(settings, param) {
         if (opts[param] !== undefined) {
            settings[param] = opts[param];
         }
         return settings;
      }
      const settingsParams = ["width", "height", "videoid", "host"];
      const settings = settingsParams.reduce(paramInOpts, {});
      const playerVarsParams = ["autoplay", "cc_load_policy",
         "controls", "disablekb", "end", "fs", "iv_load_policy",
         "list", "listType", "loop", "playlist", "rel", "start"
      ];
      settings.playerVars = playerVarsParams.reduce(paramInOpts, {});
      videoPlayer.init(video, settings);
   }

   function coverClickHandler(evt) {
      const wrapper = evt.currentTarget.nextElementSibling;
      show(wrapper);
      initPlayer(wrapper);
   }
   const cover = document.querySelector(opts.target);
   cover.addEventListener("click", coverClickHandler);
}
const playlist = "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g";


loadPlayer({
   target: ".alpha",
   start: 0,
   end: 280,
   loop: true
});
loadPlayer({
   target: ".beta",
   start: 0,
   end: 240,
   loop: true
});
loadPlayer({
   target: ".gamma",
   start: 0,
   end: 265,
   loop: true
});
loadPlayer({
   target: ".delta",
   start: 4,
   end: 254,
   loop: true
});
loadPlayer({
   target: ".epsilon",
   start: 0,
   end: 242,
   loop: true
});
loadPlayer({
   target: ".zeta",
   start: 0,
   end: 285,
   loop: true
});
loadPlayer({
   target: ".eta",
   start: 23,
   end: 312,
   loop: true
});
loadPlayer({
   target: ".theta",
   start: 2
});
loadPlayer({
   target: ".iota"
});
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #353198;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
}

svg {
  border: solid;
}

.container-left {
  float: left;
  width: 606px;
  margin: 0;
}

.container-left .wraph {
  position: relative;
  width: 606px;
  margin: 45px 0 0 0;
  overflow: hidden;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background-position: 0 -600px;
  background-size: 100% 200%;
}

.container-left .wraph .nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container-left .wraph .nav li {
  margin: 0;
  padding: 0;
  float: left;
}

.container-left .wraph .nav li {
  float: left;
  width: 198px;
  height: 198px;
  margin: 0 0 3px 0;
  background: rgba(0, 0, 0, 0.2);
}

.container-left .wraph .nav li:nth-of-type(3n+2) {
  margin: 0 3px 0 3px;
}

.container-left .wraph .nav li:nth-of-type(n+7) {
  margin-bottom: 0;
}

.container-left .wraph .nav li svg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  fill: blue;
}




.container-left .wraph .linesa::before,
.container-left .wraph .linesa::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.container-left .wraph .linesa::after {
  left: 399px;
}

.container-left .wraph .linesb::before,
.container-left .wraph .linesb::after {
  content: "";
  position: absolute;
  top: 198px;
  left: 0;
  width: 100%;
  height: 3px;
  background: #0059dd;
}

.container-left .wraph .linesb::after {
  top: 399px;
}

.container-left .wraph .nav li iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 198px;
  height: 198px;
  cursor: pointer;
}

.container-left .wraph .nav li .alpha,
.playinga {
  margin: 0;
}

.container-left .wraph .nav li .beta,
.playingb {
  margin: 0 201px 0;
}

.container-left .wraph .nav li .gamma,
.playingc {
  margin: 0 402px 0;
}

.container-left .wraph .nav li .delta,
.playingd {
  margin: 201px 0 0;
}

.container-left .wraph .nav li .epsilon,
.playinge {
  margin: 201px 201px 0;
}

.container-left .wraph .nav li .zeta,
.playingf {
  margin: 201px 402px 0;
}

.container-left .wraph .nav li .eta,
.playingg {
  margin: 402px 0 0;
}

.container-left .wraph .nav li .theta,
.playingh {
  margin: 402px 201px 0;
}

.container-left .wraph .nav li .iota,
.playingi {
  margin: 402px 402px 0;
}


a:focus {
  outline: 0;
}

.hide {
  display: none;
}
<div class="outer">
   <div class="tcell">
      <div class="container-left">
         <div class=" wraph">
            <ul class="nav">
               <li>
                  <svg width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                     <symbol id="play" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                        <title>Play</title>
                        <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                        <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
                     </symbol>
                  </svg>
                  <svg class="alpha" >
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playinga" data-id="ZPz3wzPlruA"></div>
                  </div>
               </li>
               <li>
                  <svg class="beta">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingb" data-id="VFMtNOxpV3o"></div>
                  </div>
               </li>
               <li>
                  <svg class="gamma">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingc" data-id="Zkf4EDjV1_g"></div>
                  </div>
               </li>
               <li>
                  <svg class="delta">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingd" data-id="-Xgi_way56U"></div>
                  </div>
               </li>
               <li>
                  <svg class="epsilon">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playinge" data-id="EK3h0IADYrQ"></div>
                  </div>
               </li>
               <li>
                  <svg class="zeta">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingf" data-id="YOw9J4K02H4"></div>
                  </div>
               </li>
               <li>
                  <svg class="eta">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingg" data-id="ID856YDIb6A"></div>
                  </div>
               </li>
               <li>
                  <svg class="theta">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingh" data-id="9Gn8ymkrlbI"></div>
                  </div>
               </li>
               <li>
                  <svg class="iota">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingi" data-id="qYEooPeyz5M"></div>
                  </div>
               </li>
            </ul>
            <div class="linesa"></div>
            <div class="linesb"></div>
         </div>
      </div>
   </div>
</div>

标签： htmlsvg

解决方案

您的<li>元素具有 198 像素 x 198 像素的固定大小，但您的<svg>元素具有不同的大小。使用检查器，您可以看到这种尺寸不匹配：如果我将导航类中的所有 svg 都赋予相同的尺寸，那么它们确实匹配正确使用检查器

.nav svg {
  width: 198px;
  height: 198px;
}

推荐阅读