蓝色选择区域太大答案

【问题标题】：Too big blue select area蓝色选择区域太大
【发布时间】：2020-09-14 15:39:24
【问题描述】：

我的问题是蓝色选择区域太大，导致当我将光标移动到顶部文本时，悬停属性不起作用。那里会出现一个文本光标，但应该会出现一个光标指针。

我尝试在下面的文本中添加z-index: -1; 和user-select: none; 属性，但它没有帮助。

<html>
    <head>
        <style>
            .selectionlist
            {
                color: #777777;
                font-weight: 400;
            }

            .selectionlist ol
            {
                padding: 0;
                margin: 0;
                list-style-type: none;
            }

            .selectionlist ol a
            {
                color: #777777;
                text-decoration: none;
            }

            .selectionlist ol > li
            {
                display: inline-block;
            }

            .selectionlist ol > li::before
            {
                content: "/ ";
            }

            .selectionlist ol > li:first-child:before
            {
                content: "";
            }

            .selectionlist ol > li > a:hover, .selectionlist ol > li:last-child > a:hover
            {
                color: #00B4FF;
            }

            .selectionlist ol > li:last-child > a
            {
                color: #00B4FF;
                font-weight: 600;
            }
            .hea
            {
                margin-top: -10px;
                display: flex;
                align-items: center;
            }
            .tg
            {
                margin-right: 10px;
                font-size: 50px;
                color: #00B4FF;
                font-weight: 600;
            }
            #name
            {
                display: inline-block;
                font-size: 50px;
            }
            .ad
            {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 70px;
                height: 30px;
                border-radius: 20px;
                box-sizing: border-box;
                border: 2px solid #DDD;
                color: #DDD;
                cursor: pointer;
                letter-spacing: 2px;
                padding: 5px;
                font-weight: 600;
                margin-left: 15px;
                user-select: none;
            }
            .ad:hover
            {
                /*transition: color 0.1s ease-in-out, border-color 0.1s ease-in-out;*/
                color: #00B4FF;
                border-color: #00B4FF;
            }

            .number
            {
                user-select: none;
                color: #00B4FF;
                font-size: 20px;
                margin-left: 10px;
            }
            .number
            {
                user-select: none;
                color: #00B4FF;
                font-size: 20px;
                margin-left: 10px;
            }
        </style>
    </head>
    <body>
        <div class="selectionlist">
            <ol>
                <li><a href="#">TEXT</a></li>
                <li><a href="#">TEXT</a></li>
                <li><a href="#">TEXT</a></li>
                <li><a href="#">TEXT</a></li>
            </ol>
        </div>
        <div class="hea">
            <span class="tg">TEXT</span> 
            <div id="name">TEXT</div>
            <div class="ad">TEXT</div>
            <div class="number">TEXT</div>
        </div>
    </body>
</html>

【问题讨论】：

你好，请问您可以添加您的代码或我们可以测试它的地方
你能创建a minimal example吗？
好的，我添加了代码伙计们；）
标准字体适用于半文本
你注意到你的margin top等于-10px了吗？？

标签： html css select text cursor

【解决方案1】：

增加.selectionlist 元素的z-index，使其位于.hea 元素的顶部。下面的代码带有关于要添加的两行的注释

.selectionlist {
  color: #777777;
  font-weight: 400;
  /* Add these two to increase the z-index of the list with links */
  position: relative;
  z-index: 1;
}

.selectionlist ol {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.selectionlist ol a {
  color: #777777;
  text-decoration: none;
}

.selectionlist ol>li {
  display: inline-block;
}

.selectionlist ol>li::before {
  content: "/ ";
}

.selectionlist ol>li:first-child:before {
  content: "";
}

.selectionlist ol>li>a:hover,
.selectionlist ol>li:last-child>a:hover {
  color: #00B4FF;
}

.selectionlist ol>li:last-child>a {
  color: #00B4FF;
  font-weight: 600;
}

.hea {
  margin-top: -10px;
  display: flex;
  align-items: center;
}

.tg {
  margin-right: 10px;
  font-size: 50px;
  color: #00B4FF;
  font-weight: 600;
}

#name {
  display: inline-block;
  font-size: 50px;
}

.ad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 30px;
  border-radius: 20px;
  box-sizing: border-box;
  border: 2px solid #DDD;
  color: #DDD;
  cursor: pointer;
  letter-spacing: 2px;
  padding: 5px;
  font-weight: 600;
  margin-left: 15px;
  user-select: none;
}

.ad:hover {
  /*transition: color 0.1s ease-in-out, border-color 0.1s ease-in-out;*/
  color: #00B4FF;
  border-color: #00B4FF;
}

.number {
  user-select: none;
  color: #00B4FF;
  font-size: 20px;
  margin-left: 10px;
}

.number {
  user-select: none;
  color: #00B4FF;
  font-size: 20px;
  margin-left: 10px;
}

<div class="selectionlist">
  <ol>
    <li><a href="#">TEXT</a></li>
    <li><a href="#">TEXT</a></li>
    <li><a href="#">TEXT</a></li>
    <li><a href="#">TEXT</a></li>
  </ol>
</div>
<div class="hea">
  <span class="tg">TEXT</span>
  <div id="name">TEXT</div>
  <div class="ad">TEXT</div>
  <div class="number">TEXT</div>
</div>

【讨论】：

谢谢！就是这样！