Question

目标：
将光标放在td上时，显示所选td左上角的图标。

问题：
我试图找到不同的解决方案，但它并没有那么顺利。

谢谢！

＆＃13;

table.glyphicon-hover .glyphicon {
  visibility: hidden;
}

table.glyphicon-hover td:hover .glyphicon {
  visibility: visible;
      position:relative;
    background-color: green;

}

.test {
  text-align:right;  
}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  
  
  <body>

<div class="container">

  
  <table class="test table table-striped glyphicon-hover">
    <tr>
      <th>kkjkjkjkjsfdsdfg</th>
    </tr>
    <tr>
      <td>
        <span class="glyphicon glyphicon-thumbs-up"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-trash-a-20.png"></span>
        <span>sfsdf!</span> <br>sdfsdf <br>sdfsdf <br> sdfsdf
      </td>
    </tr>

    <tr>
      <td>
      sdsdfsdf sf <span class="glyphicon glyphicon-thumbs-up"></span>
      </td>
    </tr>
  </table>
  
  
</div>

＆＃13;

Answer 1

您需要将td设置为具有相对定位，并将图标设置为具有绝对定位。然后，您可以使用left和top定位它。

table.glyphicon-hover .glyphicon {
  visibility: hidden;
  position:absolute;
}

table.glyphicon-hover td:hover .glyphicon {
visibility: visible;
background-color: green;
left: 0;
}

.table td {
position: relative
}

.test {
  text-align:right;  
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  
  
  <body>

<div class="container">

  
  <table class="test table table-striped glyphicon-hover">
    <tr>
      <th>kkjkjkjkjsfdsdfg</th>
    </tr>
    <tr>
      <td>
        <span class="glyphicon glyphicon-thumbs-up"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-trash-a-20.png"></span>
        <span>sfsdf!</span> <br>sdfsdf <br>sdfsdf <br> sdfsdf
      </td>
    </tr>

    <tr>
      <td>
      sdsdfsdf sf <span class="glyphicon glyphicon-thumbs-up"></span>
      </td>
    </tr>
  </table>
  
  
</div>

Answer 2

请参阅以下代码

新课程添加.topleftIcon

我正在做的就是将图标浮动到左侧。

table.glyphicon-hover .glyphicon {
  visibility: hidden;
}

table.glyphicon-hover td:hover .glyphicon {
  visibility: visible;
      position:relative;
    background-color: green;

}

.test {
  text-align:right;  
}

.topleftIcon{
    float:left;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  
  
  <body>

<div class="container">

  
  <table class="test table table-striped glyphicon-hover">
    <tr>
      <th>kkjkjkjkjsfdsdfg</th>
    </tr>
    <tr>
      <td>
        <span class="glyphicon glyphicon-thumbs-up topleftIcon"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-trash-a-20.png"></span>
        <span>sfsdf!</span> <br>sdfsdf <br>sdfsdf <br> sdfsdf
      </td>
    </tr>

    <tr>
      <td>
      sdsdfsdf sf <span class="glyphicon glyphicon-thumbs-up topleftIcon"></span>
      </td>
    </tr>
  </table>
  
  
</div>

显示td左上角的图标

2 个答案: