javascript - 当复选框悬停时显示工具提示文本

Question

我试图在鼠标悬停在座位上时显示工具提示文本。它应该显示悬停复选框的值、名称和id。下面是我的代码。

此表包含所有复选框及其 ID、名称和每个复选框的值。

<?php
//For seats
$a = "notbooked";

//Disable value 
$c = 'disabled="true"';
?>


<div class="plane ">

  <ol class="cabin fuselage">

    <table style="background-color:#F4F5F6"  width="80%"  align="center" height="40%">
       <tr>
          <td align="center" width="10%"><img src="../images/stair.png" width="38" height="44" alt="Stair's"></td>
          <td align="center" width="10%">&nbsp;&nbsp;&nbsp;&nbsp;</td>
          <td rowspan="14"></td>
          <td align="center" width="10%">&nbsp;&nbsp;&nbsp;&nbsp;</td>
          <td align="center" width="10%"><img src="../images/driver2.png" width="42" height="66" alt="Driver Seat"></td>
      </tr>
      <tr>
          <td align="left">
            <input type="checkbox" id="A1" name="Normal" value="45" <?php if ($a=="notbooked"){ }elseif ($a=="bookedseat") {echo $c; }else{}?>>
            <label for="A1" class="<?php if ($a=="notbooked"){echo $a; }elseif ($a=="bookedseat") {echo $a; }else{}?>"></label>
         </td>
         <td align="right">
             <input type="checkbox" id="A2" name="Normal" value="35" <?php if ($a=="notbooked"){ }elseif ($a=="bookedseat") {echo $c; }else{}?>>
             <label for="A2" class="<?php if ($a=="notbooked"){echo $a; }elseif ($a=="bookedseat") {echo $a; }else{}?>"></label>
         </td>
         <td align="center">
             <input type="checkbox" id="A3" name="Normal" value="45" <?php if ($a=="notbooked"){ }elseif ($a=="bookedseat") {echo $c; }else{}?>>
             <label for="A3" class="<?php if ($a=="notbooked"){echo $a; }elseif ($a=="bookedseat") {echo $a; }else{}?>"></label>
         </td>
         <td align="center">
             <input type="checkbox" id="A4"  name="Normal" value="45" <?php if ($a=="notbooked"){ }elseif ($a=="bookedseat") {echo $c; }else{}?>>
             <label for="A4" class="<?php if ($a=="notbooked"){echo $a; }elseif ($a=="bookedseat") {echo $a; }else{}?>"></label>
         </td>
    </tr>

Jquery

<script>
$('[type="checkbox"]').mouseover(function() {
  let $this = $(this),
         id = "id:" + $this.attr('id'),
       name = "name:" + $this.attr('name'),
      value = "value:" + $this.val(),
         br = "\r\n";
  $this.attr("title", id + br + name + br + value);
})
</script>

CSS 代码在这里，这些代码的作用是根据将在复选框上分配的 php 值更改座位的图像。

*,*:before,*:after {
  box-sizing: border-box;
}


.plane {
  margin: 40px auto;
  max-width: 200px;
}

.fuselage {
  border-right: 2px solid #000000;
  border-left: 2px solid #000000;
}

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

.row {

}

.seats {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;  
}

input[type="checkbox"][id^="A1"] {
  display: none;
}

input[type="checkbox"][id^="A2"] {
  display: none;
}

input[type="checkbox"][id^="A3"] {
  display: none;
}

input[type="checkbox"][id^="A4"] {
  display: none;
}

label {

  padding: 1px;
  display: block;
  position: relative;
  margin: 1px;
  cursor: pointer;
}

:checked + label {

}

#booked {
  display: none;
}

.notbooked {
  background-image: url(../images/seat-image/5.png);
  background-position: right center;
  background-size: auto 100%;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
}
:checked + .notbooked {
  background-image: url(../images/seat-image/6.png);
  background-position: right center;
}

.bookedseat {
  background-image: url(../images/seat-image/seats.png);
  background-position: right center;
  background-size: auto 100%;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
}

#booked:checked + .bookedseat {

}

非常感谢您的帮助。

Answer 1

请在发布问题之前确保您没有显示任何无用或无法解释的代码。 这里我们不需要你的 php 代码。假装。很多CSS也没什么用。 现在回应。我根据我的理解对你的问题进行了干净的编辑。

$('input[type="checkbox"]').mouseover(function() {
  let $this = $(this),
         id = "id:" + $this.attr('id'),
       name = "name:" + $this.attr('name'),
      value = "value:" + $this.val(),
         br = "\r\n";  
  $(this).attr("title", id + br + name + br + value);
});

.app-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;  
}

label {
  padding: 1px;
  display: block;
  position: relative;
  margin: 1px;
  cursor: pointer;
}

/*
input[type="checkbox"] {
  display: none;
}
*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="app-container">
    <div class="input-container">
        <input type="checkbox" id="A1" name="Normal" value="45" disabled="true" title="Pepperoni">
        <label for="A1" class="notbooked">label 1</label>
    </div>
    <div class="input-container">
        <input type="checkbox" id="A2" name="Normal" title="Pepperoni2">
        <label for="A2" class="notbooked">label 2</label>
    </div>
    <div class="input-container">
        <input type="checkbox" id="A3" name="Normal" value="45" disabled="true" title="Pepperoni3">
        <label for="A3" class="bookedseat">label 3</label>
    </div>
    <div class="input-container">
        <input type="checkbox" id="A4" name="Normal" value="45" title="Pepperoni4">
        <label for="A4" class="bookedseat">label 4</label>
    </div>
</div>

据我所知，您尝试在复选框上设置标题属性，但将其设置为 display: none; from documentation此属性从可访问性树中删除元素，这意味着您永远不会到达 mouseover javascript 事件，因为它不会向用户显示。所以光标无法悬停它。如果您想显示标题，请考虑应用于其他项目。