Question

你好，我有下一个代码，只有一个问题当检查输入时，它不是留在li中的图像，其中检查输入我尝试了几种方法来解决这个问题，就像设置相同的img一样，每个li都像a一样标签，但有其他问题比:)任何人都可以提出一些想法吗？

＆＃13;

  .test2{
      width: 110px;
      height: 110px;
      display: block;
      position: fixed;
      top: 10px;
      background: url(images/animal-small.jpg) no-repeat;
    }
    .test3{
      width: 110px;
      height: 110px;
      display: block;
      position: fixed;
      top: 10px;
      background: url(images/animal-small3.jpg) no-repeat;
    }
    .test{
      width: 110px;
      height: 110px;
      display: block;
      position: fixed;
      top: 10px;
      background: url(images/animal-small2.jpg) no-repeat;
    }
    input{
      visibility: hidden
    }
    input:checked + label{
      padding: 10%;
      position: fixed;
      top:150px;
      left: 150px;
      display: block;
      background-size: 400px , 400px;
      border: 1px solid black
    }
    li{
      display: inline-block;
      list-style: none;
      width: 110px;
      height: 110px;
    }
    li :hover{
      cursor: pointer;
      background-size: 110px  110px
    }

＆＃13;

<body>
    
    	<ul>
    		<li>
    			<input type="radio" name="test" value="" id="test">
    			<label for="test" class="test"></label>
    		</li>
    		<li>
    			<input type="radio" name="test" value="" id="test2">
    			<label for="test2" class="test2"></label>
    		</li>
    		<li>
    			<input type="radio" name="test" value="" id="test3">
    			<label for="test3" class="test3"></label>
    		</li>
    	</ul>
    </body>

＆＃13;

Answer 1

更新

OP请求是拥有缩略图和放大的图像，以便更直观地浏览图库。稍微改变了布局并调整了CSS以适应额外的元素（<figure>。）

避免重复代码，将样式压缩在一起。

当检查输入时，它的图像不在li
中

我怀疑网址没有指向图片文件。以下代码段中略微调整的版本可以成功显示图片。

段

＆＃13;

.test1,
.test2,
.test3 {
  width: 110px;
  height: 110px;
  display: block;
  position: fixed;
  top: 10px;
  cursor: pointer;
}
.test1 {
  background: url(http://placehold.it/50x50/000/fff?text=1) no-repeat;
}
.test2 {
  background: url(http://placehold.it/50x50/00f/eee?text=2) no-repeat;
}
.test3 {
  background: url(http://placehold.it/50x50/0e0/111?text=3) no-repeat;
}
input,
input + figure.img {
  display: none;
}
input:checked + figure.img {
  padding: 10%;
  position: fixed;
  top: 150px;
  left: 150px;
  display: block;
  background-size: 400px, 400px;
  border: 1px solid black
}
li {
  display: inline-block;
  list-style: none;
  width: 110px;
  height: 110px;
}
li:hover {
  background-size: 110px 110px
}

＆＃13;

<body>
  <fieldset>
    <ul>
      <li>
        <label for="test1" class="test1">
          <input type="radio" name="test" value="" id="test1">
          <figure class='img test1'></figure>
        </label>
      </li>
      <li>
        <label for="test2" class="test2">
          <input type="radio" name="test" value="" id="test2">
          <figure class='img test2'></figure>
        </label>
      </li>
      <li>
        <label for="test3" class="test3">
          <input type="radio" name="test" value="" id="test3">
          <figure class='img test3'></figure>
        </label>
    </ul>
  </fieldset>
</body>

＆＃13;

自定义单选按钮库

1 个答案:

更新

段