如何在單擊圖像時顯示刻度線和圖像上的疊加，但是當我點擊其他圖像時，它應該隱藏並在新圖像上顯示相同的圖像？

Question

我想要用任何顏色覆蓋圖像並在其上給出刻度標記（如選中），一次只允許一個圖像。 在點擊其他圖像時，它應該隱藏前一個圖像，並在新圖像上顯示勾選和疊加。

<div class="grid-two imageandtext">
                                    <figure>

                                        <img src="assets/images/painting.jpg" class="img-thumbnail">
                                        <div class="caption">
                                            <p>Painting</p>
                                        </div>                     
                                        <div class="imageandtext image_grid">
                                            <img src="assets/images/photography.jpg" class="img-thumbnail" >
                                            <div class="caption1">
                                                <p>Photography</p>
                                            </div></div>
                                        </figure>
                                    </div>

它應該顯示如下圖像

現在它正是這樣工作的

https://jsfiddle.net/liza_susan/L8jyum77/

Answer 1

這是一個開始，使用封面的偽元素， label和radio類型的input來處理選擇。

我將圖像包裝在標簽中，單擊時，它只是檢查輸入。

在CSS中，當檢查輸入時， .image_grid input:checked + .caption::after rule應用屬性覆蓋並顯示復選標記。

更新了小提琴

 .caption { position: absolute; top: 0; left: 5px; /* changed to match image_grid padding */ height: 100%; width: calc(100% - 5px); /* changed to match image_grid padding */ padding: 0 10px; box-sizing: border-box; pointer-events: none; } .caption p { display: inline-block; padding: 10px; color: #fff; background: rgba(0,0,0,0.5); font-family: 'Myriad Pro regular'; font-size: 15.31px; } .imageandtext { position: relative; } .image_grid { display: inline-block; padding-left: 5px; } .image_grid img { /* added rule */ display: block; } .image_grid input { display: none; } .image_grid input:checked + .caption { background: rgba(0,0,0,0.5); } .image_grid input:checked + .caption::after { content: '✔'; position: absolute; top: 50%; left: 50%; width: 70px; height: 70px; transform: translate(-50%,-50%); color: white; font-size: 60px; line-height: 80px; text-align: center; border: 2px solid white; border-radius: 50%; } 

 <div class="grid-two imageandtext"> <div class="imageandtext image_grid"> <label for="selimg1"> <img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail"> </label> <input type="radio" name="selimg" id="selimg1"> <div class="caption"> <p>Painting</p> </div> </div> <div class="imageandtext image_grid"> <label for="selimg2"> <img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail"> </label> <input type="radio" name="selimg" id="selimg2"> <div class="caption"> <p>Photography</p> </div> </div> </div> 

---

根據注釋，這里是一個caption位於label內部的版本，作為span （因為label只能將內聯元素作為子元素）。

有了這個， input上不需要唯一的id，可以刪除for屬性，也不需要補償image_grid上設置的任何填充和/或邊距。

更新了小提琴

堆棧代碼段

 .caption { position: absolute; top: 0; left: 0; height: 100%; width: 100%; padding: 0 10px; box-sizing: border-box; pointer-events: none; } .caption span { display: inline-block; padding: 10px; color: #fff; background: rgba(0,0,0,0.5); font-family: 'Myriad Pro regular'; font-size: 15.31px; } .image_grid { display: inline-block; padding-left: 25px; } .image_grid label { position: relative; display: inline-block; } .image_grid img { display: block; } .image_grid input { display: none; } .image_grid input:checked + .caption { background: rgba(0,0,0,0.5); } .image_grid input:checked + .caption::after { content: '✔'; position: absolute; top: 50%; left: 50%; width: 70px; height: 70px; transform: translate(-50%,-50%); color: white; font-size: 60px; line-height: 80px; text-align: center; border: 2px solid white; border-radius: 50%; } 

 <div class="grid-two imageandtext"> <div class="imageandtext image_grid"> <label> <img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail"> <input type="radio" name="selimg"> <span class="caption"> <span>Painting</span> </span> </label> </div> <div class="imageandtext image_grid"> <label> <img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail"> <input type="radio" name="selimg"> <span class="caption"> <span>Painting</span> </span> </label> </div> </div> 

Answer 2

當某人懸停在圖像上時添加圖像怎么樣？

即

.image-thumbnail:hover {
    background-image: <path to image>;
    background-repeat: no-repeat;
}

Answer 3

這個JQuery函數怎么樣：

$('.image_grid').click(function() {
  $('.image_grid img:nth-of-type(2)').hide();
  $(this).children('img:nth-of-type(2)').show();
});

 $('.image_grid').click(function() { $('.image_grid img:nth-of-type(2)').hide(); $(this).children('img:nth-of-type(2)').show(); }); 

 .grid-two { width: 50%; display: inline; } .caption1 { position: absolute; top: -51px; left: 11px; width: 100%; color: #000; font-family: Myriad Pro regular; font-size: 15.31px; } .imageandtext { position: relative; } .image_grid { display: inline; padding-left: 5px; } .absolute { border: 1px solid black; position: absolute; left: 0px; display: none; width: 50%; margin: 25%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="grid-two imageandtext"> <figure> <div class="imageandtext image_grid"> <img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail"> <div class="caption1"> <p>Painting</p> </div> <img src="https://i.stack.imgur.com/Kg1Do.png" class="absolute"> </div> <div class="imageandtext image_grid"> <img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail"> <div class="caption1"> <p>Photography</p> </div> <img src="https://i.stack.imgur.com/Kg1Do.png" class="absolute"> </div> </figure> </div> 

的jsfiddle