您的位置: 首页  >  技术问答  >  图标在选择图像时出现

图标在选择图像时出现

分类: 技术问答 • 2022-08-21 18:32:48
问题描述：

我正在调色板项目中，并尝试在选择图像时出现图标。图标在选择图像时出现

图标现在放置在米色旁边，但我正努力使其在未选择图像时消失。

下图描述了我对这个项目的想法。

请帮忙。

enter image description here

enter image description here

* { 
 
    box-sizing:border-box; 
 
} 
 

 
body { 
 
    margin:0; 
 
    color: #FFF; 
 
} 
 

 
.board { 
 
    letter-spacing: 1px; 
 
} 
 

 
.board-nav-indicator { 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    width:75px; 
 
    height:75px; 
 
    /*background-color:red;*/ 
 
    background-image: -webkit-linear-gradient(left top, #FF512F, #DD2476); 
 
    background-image: -moz-linear-gradient(left top, #FF512F, #DD2476); 
 
    background-image: -ms-linear-gradient(bottom right, #FF512F, #DD2476); 
 
    background-image: -o-linear-gradient(bottom right, #FF512F, #DD2476); 
 
    background-image: linear-gradient(bottom right, #FF512F, #DD2476); 
 
    transition:all 0.3s; 
 
    transform:translateX(0); 
 
    z-index:1; 
 
} 
 
[data-page='0'] .board-nav-indicator { 
 
    transform:translateX(0); 
 
} 
 
[data-page='1'] .board-nav-indicator { 
 
    transform:translateX(100%); 
 
} 
 
[data-page='2'] .board-nav-indicator { 
 
    transform:translateX(200%); 
 
} 
 

 
.board-nav-buttons { 
 
    display: flex; 
 
    align-items: center; 
 
    position:relative; 
 
    z-index:2; 
 
} 
 

 
.board-pages { 
 
    position:absolute; 
 
    top:75px; 
 
    left:0; 
 
    width:100%; 
 
    height:calc(100% - 75px); 
 
    overflow:hidden; 
 
} 
 
.board-page { 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    width:100%; 
 
    height:100%; 
 
    transition:all 0.4s; 
 
    transform:translateX(0); 
 
    overflow:auto; 
 
    background-color: #262931; 
 
} 
 

 
.grid-row-theme .grid-item-theme { 
 
    max-width: 130px; 
 
} 
 

 
#align-left { 
 
    float: left; 
 
    color: #747474; 
 
} 
 

 
#align-right { 
 
    float: right; 
 
    color: #9CC8E3; 
 
} 
 

 
.grid-item { 
 
    flex:0 1 25%; 
 
    padding:6px; 
 
} 
 

 
.grid-item-theme { 
 
    flex:0 1 25%; 
 
    padding:6px; 
 
} 
 

 
.grid-row { 
 
    overflow-x:auto; 
 
    white-space:nowrap; 
 
} 
 

 
.grid-row .grid-item { 
 
    display:inline-block; 
 
    max-width:110px; 
 
} 
 

 
.grid-item-content { 
 
    text-align:left; 
 
    font-family: "mr-eaves-modern"; 
 
    font-size:0.3rem; 
 
    text-transform:uppercase; 
 
} 
 

 

 
.pick-palette img{ 
 
    border: 3px solid #FFF; 
 
} 
 

 
#dropdown-menu { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    text-align: center; 
 
    margin: 2% 0 6% 0; 
 
    font-size: 0.9rem; 
 
    letter-spacing: 1px; 
 
} 
 

 
.grid-item-content { 
 
    height: 26px; 
 
    line-height: 26px; 
 
    position: relative; 
 
} 
 
.grid-item-content i { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
} 
 

 
.grid-item-content { 
 
    height: 26px; 
 
    line-height: 26px; 
 
    position: relative; 
 
} 
 
.grid-item-content i { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
}
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Omnibag Project</title> 
 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 
 
    <link href="assets/css/style.css" rel="stylesheet"> 
 
    <link href="assets/css/font-awesome.min.css" rel="stylesheet"> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
</head> 
 
<body> 
 

 
<div class="board-pages"> 
 

 
     <div class="board-page"> 
 

 
     <div class="grid-item-theme" id="dropdown-menu">Warm<i class="material-icons">keyboard_arrow_down</i></div> 
 

 
     <div class="trending-above-palette"> 
 
      <div class="grid-item-theme" id="align-left">Trending</div> 
 
      <div class="grid-item-theme" id="align-right">See all</div> 
 
      <div style="clear: both;"></div> 
 
     </div> 
 

 
     <div class="grid-row"> 
 
      <div class="grid-item grid-beige"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
       Beige 
 
       <i class="material-icons more-icon">more_horiz</i> 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-camel"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Camel 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-salmon"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Salmon Pink 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-navajo"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Navajo White 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-niagara"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Niagara 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-primrose"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Primrose 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-lapis"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Lapis Blue 
 
      </div> 
 
      </div> 
 

 

 
     </div> 
 
     
 

 
     <div class="after-first-palette"> 
 
      <div class="grid-item-theme" id="align-left">Newly added</div> 
 
      <div class="grid-item-theme" id="align-right">See all</div> 
 
      <div style="clear: both;"></div> 
 
     </div> 
 

 

 
     <div class="grid-row"> 
 
      <div class="grid-item grid-pale"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Pale Blue 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-moss"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Moss Green 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-melon"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Melon 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-chiffon"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Chiffon 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-island"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Island 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-dogwood"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Dogwood 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-greenery"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Greenery 
 
      </div> 
 
      </div> 
 

 
     </div> 
 
     
 

 
     <div class="after-first-palette"> 
 
      <div class="grid-item-theme" id="align-left">All Warm Colors</div> 
 
      <div class="grid-item-theme" id="align-right">See all</div> 
 
      <div style="clear: both;"></div> 
 
     </div>  
 
     <div class="grid-row"> 
 

 
      <div class="grid-item grid-ivory"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Ivory 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-honeydew"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Honeydew 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-lavender"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Lavender 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-canary"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Canary 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-hazelnut"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Hazelnut 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-kale"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Kale 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-sharkskin"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content sharkskin"> 
 
       Sharkskin 
 
      </div> 
 
      </div> 
 

 
     </div> 
 
     </div> 
 

 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
    <script src="https://use.typekit.net/hoc0zbs.js"></script> 
 
    <script>try{Typekit.load({ async: true });}catch(e){}</script> 
 

 
    <script> 
 

 
    $(".board-pages .grid-item").on("click",function(){ 
 
     $(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette"); 
 
    $(this).addClass("pick-palette"); 
 
    }); 
 

 
    $(".board-pages .grid-item-pattern-board").on("click",function(){ 
 
     $(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette"); 
 
    $(this).addClass("pick-palette"); 
 
    }); 
 
    
 

 
    </script>

答

月1日，你可以同一事件不同的选择这样的补充： $(".board-pages .grid-item-pattern-board, .board-pages .grid-item")单独由,

第二我检查点击一个已经有课表示它已经激活，然后我停用所有。如果还没有激活，那么deactive就会激活这一个。

$(".board-pages .grid-item-pattern-board, .board-pages .grid-item").on("click", function() { 
    if ($(this).hasClass("pick-palette")) { 
     $(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette"); 
    } else { 
     $(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette"); 
     $(this).addClass("pick-palette"); 
    } 
    }); 


* { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    color: #FFF; 
 
} 
 

 
.board { 
 
    letter-spacing: 1px; 
 
} 
 

 
.board-nav-indicator { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 75px; 
 
    height: 75px; 
 
    /*background-color:red;*/ 
 
    background-image: -webkit-linear-gradient(left top, #FF512F, #DD2476); 
 
    background-image: -moz-linear-gradient(left top, #FF512F, #DD2476); 
 
    background-image: -ms-linear-gradient(bottom right, #FF512F, #DD2476); 
 
    background-image: -o-linear-gradient(bottom right, #FF512F, #DD2476); 
 
    background-image: linear-gradient(bottom right, #FF512F, #DD2476); 
 
    transition: all 0.3s; 
 
    transform: translateX(0); 
 
    z-index: 1; 
 
} 
 

 
[data-page='0'] .board-nav-indicator { 
 
    transform: translateX(0); 
 
} 
 

 
[data-page='1'] .board-nav-indicator { 
 
    transform: translateX(100%); 
 
} 
 

 
[data-page='2'] .board-nav-indicator { 
 
    transform: translateX(200%); 
 
} 
 

 
.board-nav-buttons { 
 
    display: flex; 
 
    align-items: center; 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 

 
.board-pages { 
 
    position: absolute; 
 
    top: 75px; 
 
    left: 0; 
 
    width: 100%; 
 
    height: calc(100% - 75px); 
 
    overflow: hidden; 
 
} 
 

 
.board-page { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    transition: all 0.4s; 
 
    transform: translateX(0); 
 
    overflow: auto; 
 
    background-color: #262931; 
 
} 
 

 
.grid-row-theme .grid-item-theme { 
 
    max-width: 130px; 
 
} 
 

 
#align-left { 
 
    float: left; 
 
    color: #747474; 
 
} 
 

 
#align-right { 
 
    float: right; 
 
    color: #9CC8E3; 
 
} 
 

 
.grid-item { 
 
    flex: 0 1 25%; 
 
    padding: 6px; 
 
} 
 

 
.grid-item-theme { 
 
    flex: 0 1 25%; 
 
    padding: 6px; 
 
} 
 

 
.grid-row { 
 
    overflow-x: auto; 
 
    white-space: nowrap; 
 
} 
 

 
.grid-row .grid-item { 
 
    display: inline-block; 
 
    max-width: 110px; 
 
} 
 

 
.grid-item-content { 
 
    text-align: left; 
 
    font-family: "mr-eaves-modern"; 
 
    font-size: 0.3rem; 
 
    text-transform: uppercase; 
 
} 
 

 
.pick-palette img { 
 
    border: 3px solid #FFF; 
 
} 
 

 
#dropdown-menu { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    text-align: center; 
 
    margin: 2% 0 6% 0; 
 
    font-size: 0.9rem; 
 
    letter-spacing: 1px; 
 
} 
 

 
.grid-item-content { 
 
    height: 26px; 
 
    line-height: 26px; 
 
    position: relative; 
 
} 
 

 
.grid-item-content i { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
} 
 

 
.grid-item-content { 
 
    height: 26px; 
 
    line-height: 26px; 
 
    position: relative; 
 
} 
 

 
.grid-item-content i { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
}
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Omnibag Project</title> 
 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 
 
    <link href="assets/css/style.css" rel="stylesheet"> 
 
    <link href="assets/css/font-awesome.min.css" rel="stylesheet"> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
</head> 
 

 
<body> 
 

 
    <div class="board-pages"> 
 

 
    <div class="board-page"> 
 

 
     <div class="grid-item-theme" id="dropdown-menu">Warm<i class="material-icons">keyboard_arrow_down</i></div> 
 

 
     <div class="trending-above-palette"> 
 
     <div class="grid-item-theme" id="align-left">Trending</div> 
 
     <div class="grid-item-theme" id="align-right">See all</div> 
 
     <div style="clear: both;"></div> 
 
     </div> 
 

 
     <div class="grid-row"> 
 
     <div class="grid-item grid-beige"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
      Beige 
 
      <i class="material-icons more-icon">more_horiz</i> 
 
      </div> 
 
     </div> 
 

 
     <div class="grid-item grid-camel"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
      Camel 
 
      </div> 
 
     </div> 
 

 
     <div class="grid-item grid-salmon"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
      Salmon Pink 
 
      </div> 
 
     </div> 
 

 
     <div class="grid-item grid-navajo"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
      Navajo White 
 
      </div> 
 
     </div> 
 

 
     <div class="grid-item grid-niagara"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
      Niagara 
 
      </div> 
 
     </div> 
 

 
     <div class="grid-item grid-primrose"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
      Primrose 
 
      </div> 
 
     </div> 
 

 
     <div class="grid-item grid-lapis"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
      Lapis Blue 
 
      </div> 
 
     </div> 
 

 

 
     </div> 
 

 

 
     <div class="after-first-palette"> 
 
     <div class="grid-item-theme" id="align-left">Newly added</div> 
 
     <div class="grid-item-theme" id="align-right">See all</div> 
 
     <div style="clear: both;"></div> 
 
     </div> 
 

 

 
     <div class="grid-row"> 
 
     <div class="grid-item grid-pale"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
      Pale Blue 
 
      </div> 
 
     </div> 
 

 
     <div class="grid-item grid-moss"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
      Moss Green 
 
      </div> 
 
     </div> 
 

 
     <div class="grid-item grid-melon"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
      Melon 
 
      </div> 
 
     </div> 
 

 
     <div class="grid-item grid-chiffon"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
      Chiffon 
 
      </div> 
 
     </div> 
 

 
     <div class="grid-item grid-island"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
      Island 
 
      </div> 
 
     </div> 
 

 
     <div class="grid-item grid-dogwood"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
      Dogwood 
 
      </div> 
 
     </div> 
 

 
     <div class="grid-item grid-greenery"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
      Greenery 
 
      </div> 
 
     </div> 
 

 
     </div> 
 

 

 
     <div class="after-first-palette"> 
 
     <div class="grid-item-theme" id="align-left">All Warm Colors</div> 
 
     <div class="grid-item-theme" id="align-right">See all</div> 
 
     <div style="clear: both;"></div> 
 
     </div> 
 
     <div class="grid-row"> 
 

 
     <div class="grid-item grid-ivory"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
      Ivory 
 
      </div> 
 
     </div> 
 

 
     <div class="grid-item grid-honeydew"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
      Honeydew 
 
      </div> 
 
     </div> 
 

 
     <div class="grid-item grid-lavender"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
      Lavender 
 
      </div> 
 
     </div> 
 

 
     <div class="grid-item grid-canary"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
      Canary 
 
      </div> 
 
     </div> 
 

 
     <div class="grid-item grid-hazelnut"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
      Hazelnut 
 
      </div> 
 
     </div> 
 

 
     <div class="grid-item grid-kale"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
      Kale 
 
      </div> 
 
     </div> 
 

 
     <div class="grid-item grid-sharkskin"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content sharkskin"> 
 
      Sharkskin 
 
      </div> 
 
     </div> 
 

 
     </div> 
 
    </div> 
 

 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
    <script src="https://use.typekit.net/hoc0zbs.js"></script> 
 
    <script> 
 
     try { 
 
     Typekit.load({ 
 
      async: true 
 
     }); 
 
     } catch (e) {} 
 
    </script> 
 

 
    <script> 
 
     $(".board-pages .grid-item-pattern-board, .board-pages .grid-item").on("click", function() { 
 
     if ($(this).hasClass("pick-palette")) { 
 
      $(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette"); 
 
     } else { 
 
      $(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette"); 
 
      $(this).addClass("pick-palette"); 
 
     } 
 
     }); 
 
    </script>

相关推荐