Question

我想仅在相应标签悬停或选中时显示复选框。这很容易，但是当我显示复选框时，我正在努力将标签文本放置在不向右跳的位置。

label input[type=checkbox] {
  display: none;
}

label:hover input[type=checkbox], input[type=checkbox]:checked{
  display: inline;
}

<label>
  <input type="checkbox">
  text
</label>

Answer 1

您可以在显示位置使用可见性，如下所示：

<style>
    label input[type=checkbox] {
        visibility: hidden;
    }

    label:hover input[type=checkbox], input[type=checkbox]:checked {
        visibility:visible;
    }
</style>

Answer 2

也许您可以使用visibility属性而不是显示。

<!doctype html>

<head>
<style>
    label input[type=checkbox] {
        visibility: hidden;
    }

    label:hover input[type=checkbox],
    input[type=checkbox]:checked {
        visibility: visible;
    }
</style>
</head>

<body>
    <label>
        <input type="checkbox"> text
</label>

Answer 3

我看到了一些选项：

选中文本右侧的复选框，这样文本就不会移动。
使用不透明度而不是可见性（某些浏览器不支持可见性）
为复选框设置动画，使文本向右滑动（因此将复选框的宽度（或最大宽度）设置为隐藏溢出的<label> <span> <input type="checkbox"> </span> text </label> label span { display: inline-block; max-width: 0; overflow: hidden; transition: max-width 0.3s linear; } label:hover span { max-width: 30px; transition: max-width 0.3s linear; }，然后通过转换更新它）

不透明度：iPhone Development on Hackintosh

动画：https://jsfiddle.net/ahmadabdul3/ghogvcsx/1/

function bubble() {
  var rightOffset = $(window).width() - 400; //where i want them on the right

  do {
    var leftPx = Math.floor(Math.random() * $(window).width() - 100);
  } while (leftPx >= 400 || rightOffset <= leftPx);

  var topPx = Math.floor(Math.random() * $(window).height() - 100); //not even going to worry about the top yet

  if(bubbleCount <= 30){
    bubbleCount ++;
    $('html').append("<div class=bubble style=' left: " + leftPx + "px; top: " + topPx + "px;'></div>");
    $('.bubble').animate({
      opacity: 0.5,
    }, 3000, 'swing')
    .animate({
      opacity: 0,
    }, 3000, 'swing', function(){
      $(this).remove();
      bubbleCount -= 1;
    });
  }
}

Answer 4

简单的解决方案是首先插入文本然后复选框。添加css来美化它。

<label>
  text
  <input type="checkbox">
</label>

Answer 5

查看此代码检查一下：标签输入[type = checkbox] { display：none; 位置：绝对的; } label span { margin-left：20px; } label：悬停输入[type = checkbox]，输入[type = checkbox]：checked { 显示：内联; }

您的代码：文本

    label input[type=checkbox] {
      display: none;
      position:absolute;
    }
    label span {
      margin-left: 20px;
    }
    label:hover input[type=checkbox], input[type=checkbox]:checked{
      display: inline;
    }

    <label>
      <input type="checkbox">
      <span>text</span>
    </label>

在悬停期间或选中时隐藏/显示标签内的复选框的位置

5 个答案: