Search code examples
htmlcssselecttextcursor

Too big blue select area

My problem is that the blue select area is too big and cause of that when I move my cursor at the top text the hover property doesn't work. A text cursor appears there, but a cursor pointer should appear.

I tried to add z-index: -1; and user-select: none; attribute to the text below, but it didn't help.

enter image description here

<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>
Solution

  • Increase the z-index of the .selectionlist element so that it is on top of the .hea element. Code below with note about the two lines to add

    .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>