javascript - 选中输入类别菜单时使箭头图标出现 CSS3

标签 javascript html css

我在检查输入时出现字体超棒的图标时遇到了一些不便。

它用于投资组合画廊部分，我在标签内添加了图标，所以目标是当我选择类别菜单时，它会显示一个底部边框和向下的图标。

到目前为止，我只能使边框正常工作，但无法显示此图标。 我已经尝试过不透明度，但我不确定我是否在按我应该的方式使用输入选择器。

它应该以相同的方式适用于所有类别。

有人能告诉我这是否可以做到吗？

我很感激在这方面的任何帮助。

body {
  margin: auto;
  background: #F2F5E9;
  width: 100%;
  font-family: "Arial"
}

.containergallery {
  text-align: center;
  margin-top: 30px;
}

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 0 8% 2% 5%;
  flex-wrap: wrap;
}

ul.gallery li {
  list-style-type: none;
  margin-top: 40px;
  opacity: 1;
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
}

label {
  position: relative;
  text-align: center;
  font-family: 'robotoregular', sans-serif;
  cursor: pointer;
  color: #fff;
  background: #cccccc;
  padding: 0.5%;
  overflow: hidden;
}

input[type="radio"]:checked+label {
  background: #22b0b4;
  border-bottom: 4px solid #000;
}

.fa-caret-down {
  position: absolute;
  left: 45%;
  top: 75%;
  color: #000;
  font-size: 26px;
  opacity: 0;
}


/*menu rounded corners*/
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
  <title></title>
</head>
<body>
  
  
  <div class="containergallery">
    <input type="radio" id="select-all" name="button" onclick="myFunction()">
    <label for="select-all" class="label-all">
      <i class="fas fa-caret-down"></i>
      All works
    </label>
    <input type="radio" id="select-creative" name="button">
    <label for="select-creative" class="label-creative">
      Creative
    </label>
    <input type="radio" id="select-corporate" name="button">
    <label for="select-corporate" class="label-corporate">
      Corporate
    </label>
    <input type="radio" id="select-portfolio" name="button">
    <label for="select-portfolio" class="label-portfolio">
      Portfolio
    </label>
    
    
    <ul class="gallery">
      <li class="creative-item">
        <img src="01.jpg" />
        <div class="overlay">
          <div class="text"><p><b>My Name is John</b><br> description image bref</p>
          </div>
          <i class="fas fa-eye"></i>
        </div>
      </li>
      <li class="creative-item">
        <img src="02.jpg" />
        <div class="overlay">
          <div class="text"><p><b>My Name is John</b><br> description image bref</p>
          </div>
          <i class="fas fa-eye"></i>
        </div>
      </li>
      <li class="portfolio-item">
        <img src="03.jpg" />
        <div class="overlay">
          <div class="text"><p><b>My Name is John</b><br> description image bref</p>
          </div>
          <i class="fas fa-eye"></i>
        </div>
      </li>
      <li class="creative-item">
        <img src="04.jpg" />
        <div class="overlay">
          <div class="text"><p><b>My Name is John</b><br> description image bref</p>
          </div>
          <i class="fas fa-eye"></i>
        </div>
      </li>
      <li class="corporate-item">
        <img src="05.jpg" />
        <div class="overlay">
          <div class="text"><p><b>My Name is John</b><br> description image bref</p>
          </div>
          <i class="fas fa-eye"></i>
        </div>
      </li>
      
      <li class="portfolio-item">
        <img src="06.jpg" />
        <div class="overlay">
          <div class="text"><p><b>My Name is John</b><br> description image bref</p>
          </div>
          <i class="fas fa-eye"></i>
        </div>
      </li>
      <li class="portfolio-item">
        <img src="07.jpg" />
        <div class="overlay">
          <div class="text"><p><b>My Name is John</b><br> description image bref</p>
          </div>
          <i class="fas fa-eye"></i>
        </div>
      </li>
      <li class="corporate-item">
        <img src="08.jpg" />
        <div class="overlay">
          <div class="text"><p><b>My Name is John</b><br> description image bref</p>
          </div>
          <i class="fas fa-eye"></i>
        </div>
      </li>
    </ul>
  </div>
  
  
</body>
</html>

最佳答案

您需要添加此 css 代码:

input[type="radio"]:checked+label i {
  opacity: 1;
}

选中相应的单选按钮时，这会将图标的不透明度设置为1

body {
  margin: auto;
  background: #F2F5E9;
  width: 100%;
  font-family: "Arial"
}

.containergallery {
  text-align: center;
  margin-top: 30px;
}

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 0 8% 2% 5%;
  flex-wrap: wrap;
}

ul.gallery li {
  list-style-type: none;
  margin-top: 40px;
  opacity: 1;
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
}

label {
  position: relative;
  text-align: center;
  font-family: 'robotoregular', sans-serif;
  cursor: pointer;
  color: #fff;
  background: #cccccc;
  padding: 0.5%;
  overflow: hidden;
}

input[type="radio"]:checked+label {
  background: #22b0b4;
  border-bottom: 4px solid #000;
}

.fa-caret-down {
  position: absolute;
  left: 45%;
  top: 75%;
  color: #000;
  font-size: 26px;
  opacity: 0;
}

input[type="radio"]:checked+label i {
  opacity: 1;
}


/*menu rounded corners*/

.label-all {
  border-radius: 3px 0 0 3px;
}

.label-portfolio {
  border-radius: 0 3px 3px 0;
}

input {
  display: none;
}

img {
  display: block;
  width: 300px;
  height: auto;
}

li {
  position: relative;
  width: 300px;
}


/*Overlay effect for photos*/

li:hover .overlay,
.container:hover .fa-eye {
  opacity: 1;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  transition: .5s ease;
  opacity: 0;
  height: 35%;
}

.text {
  color: #f1f1f1;
  font-size: 14px;
  text-align: left;
  padding: 0 5px 5px 10px;
  line-height: 1.6;
}

.fa-eye {
  position: absolute;
  right: 5px;
  top: -26px;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 100%;
  background-color: #22b0b4;
  padding: 15px;
  overflow: visible;
}


/*Select Categorie*/

input#select-creative:checked~.gallery li:not(.creative-item),
input#select-corporate:checked~.gallery li:not(.corporate-item),
input#select-portfolio:checked~.gallery li:not(.portfolio-item) {
  opacity: 0.1;
}
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" />

<div class="containergallery">
  <input type="radio" id="select-all" name="button" onclick="myFunction()">
  <label for="select-all" class="label-all">
      <i class="fas fa-caret-down"></i>
      All works
    </label>
  <input type="radio" id="select-creative" name="button">
  <label for="select-creative" class="label-creative">
    <i class="fas fa-caret-down"></i>
      Creative
    </label>
  <input type="radio" id="select-corporate" name="button">
  <label for="select-corporate" class="label-corporate">
    <i class="fas fa-caret-down"></i>
      Corporate
    </label>
  <input type="radio" id="select-portfolio" name="button">
  <label for="select-portfolio" class="label-portfolio">
    <i class="fas fa-caret-down"></i>
      Portfolio
    </label>


  <ul class="gallery">
    <li class="creative-item">
      <img src="01.jpg" />
      <div class="overlay">
        <div class="text">
          <p><b>My Name is John</b><br> description image bref</p>
        </div>
        <i class="fas fa-eye"></i>
      </div>
    </li>
    <li class="creative-item">
      <img src="02.jpg" />
      <div class="overlay">
        <div class="text">
          <p><b>My Name is John</b><br> description image bref</p>
        </div>
        <i class="fas fa-eye"></i>
      </div>
    </li>
    <li class="portfolio-item">
      <img src="03.jpg" />
      <div class="overlay">
        <div class="text">
          <p><b>My Name is John</b><br> description image bref</p>
        </div>
        <i class="fas fa-eye"></i>
      </div>
    </li>
    <li class="creative-item">
      <img src="04.jpg" />
      <div class="overlay">
        <div class="text">
          <p><b>My Name is John</b><br> description image bref</p>
        </div>
        <i class="fas fa-eye"></i>
      </div>
    </li>
    <li class="corporate-item">
      <img src="05.jpg" />
      <div class="overlay">
        <div class="text">
          <p><b>My Name is John</b><br> description image bref</p>
        </div>
        <i class="fas fa-eye"></i>
      </div>
    </li>

    <li class="portfolio-item">
      <img src="06.jpg" />
      <div class="overlay">
        <div class="text">
          <p><b>My Name is John</b><br> description image bref</p>
        </div>
        <i class="fas fa-eye"></i>
      </div>
    </li>
    <li class="portfolio-item">
      <img src="07.jpg" />
      <div class="overlay">
        <div class="text">
          <p><b>My Name is John</b><br> description image bref</p>
        </div>
        <i class="fas fa-eye"></i>
      </div>
    </li>
    <li class="corporate-item">
      <img src="08.jpg" />
      <div class="overlay">
        <div class="text">
          <p><b>My Name is John</b><br> description image bref</p>
        </div>
        <i class="fas fa-eye"></i>
      </div>
    </li>
  </ul>
</div>

关于javascript - 选中输入类别菜单时使箭头图标出现 CSS3，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50644284/

上一篇：html - 为什么填充和边距不起作用？

下一篇：css - 使每一列都在 flex-direction :column flex-wrap:wrap list be no wider than it needs to be

相关文章：

javascript - 如何将日期转换为 "2015-05-14T23:00:00"格式 - Jquery

php - 我想在 foreach 上应用条件

javascript - css:缩小时保持浏览器居中

css - 在上一个文件夹中输出路径时使用 Sublime Text 2 编译/观看 Sass

css - Joomla/美德市场 : Sub-Menu items not showing on vertical menu

javascript - 使用 JavaScript 且几乎不用 HTML 创建文本和图像列表的最佳方法是什么？

javascript - 循环中的多个设置超时

javascript - 使用jquery获取span的高度

html - 我的布局中 img 和 p 之间出现间隙

javascript - 替换JS中某个字符的所有实例？

©2024 IT工具网  联系我们