使用css在特定类别的元素下添加图像

时间：2017-09-16 19:50:54

标签： javascript css

我想做什么：

我想添加一个＆＃34; walkingMan＆＃34;当一个元素的类更改为activeCell时，将图像放在下。我知道如何使用伪类将图像添加到元素的前面或后面，但据我所知，我不能用:below之类的东西来实现同样的效果。我有没有一种方法可以用于micmic？

我做了什么：

我在每个上部单元格下方添加了图像，并在类更改为activeCell时使其可见。但我希望找到一个更简单的解决方案。

它看起来像什么： enter image description here

代码：Simplified Code Example

6 个答案:

答案 0 :(得分：2)

您可以在.cell元素上使用单个伪元素，并在其处于活动状态时在其上放置背景图像。

＆＃13;
＆＃13; 
let activeIndex = 0;
const cells = [...document.querySelectorAll('.cell')];
setInterval(() => {
  cells.forEach(cell => {
    cell.classList.remove('activeCell')
  });
  cells[activeIndex].classList.add('activeCell');
  activeIndex = activeIndex === cells.length - 1 ? 0 : (activeIndex + 1);
}, 300)
＆＃13; 
.cell {
  display: inline-block;
  border: 1px solid black;
  margin-bottom: 1.2em;
}

.activeCell {
  background-color: lightgrey;
  position: relative;
}

.activeCell::after {
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  top: 1.3em;
  left: calc(50% - .5em); /* Center the stickman. Position it half of its width before the parent center*/
  background-image: url('https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png');
  background-size:cover; /* Scale the stickman to completely cover the background area.  */
}
＆＃13; 
<div>
<div class='top'>
  <a class='cell'>One</a>
  <a class='cell'>One</a>
  <a class='cell'>One</a>
  <a class='cell'>One</a>
</div>
<div class='bottom'>
  <a class='cell'>One</a>
  <a class='cell'>One</a>
  <a class='cell'>One</a>
  <a class='cell'>One</a>
</div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

  

为活动元素添加.RunManActive类

//clicking  add active Class
$(".RunMan").click(function() {
  $(".RunMan").removeClass('RunManActive');
  $(this).toggleClass('RunManActive');
});

//timing add active Class
var i=0;
var $elm=$(".Animate");
setInterval(function(){ 
  $elm.removeClass('RunManActive');
  $elm.eq(i).toggleClass('RunManActive');
  i=$elm.length<=i?0:i+1; 
}, 1000);
.RunMan{
 width:35px;
 height:35px;
 background-color:lightgray;
 border:3px solid #fff;
 float:left;
 position: relative;
}
.RunManActive{
 background-color:#eee;
 border:3px solid lightgray;
}
.RunManActive > div{
 width:35px;
 height:35px;
 position: absolute;
 background-image:url(http://www.iconsfind.com/wp-content/uploads/2013/11/Objects-Running-man-icon.png);
 background-size:cover;
 top:100%;
 margin-top:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="RunMan"><div></div></div>
<div class="RunMan RunManActive"><div></div></div>
<div class="RunMan"><div></div></div>
<div class="RunMan"><div></div></div>
<div class="RunMan"><div></div></div>

<br><br><br><br><br><br>
<div style=" width:100%">
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan "><div></div></div>
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan"><div></div></div>

答案 2 :(得分：1)

这个怎么样：https://jsfiddle.net/147prwy5/3/

HTML 

<div class="cell active">
  <a>One</a>
  <img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell">
  <a>One</a>
  <img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell">
  <a>One</a>
  <img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell active">
  <a>One</a>
  <img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>

CSS 

.cell {
  display: inline-block;
}
.cell a {
  border: 1px solid black;  
}

.cell.active a {
  background-color: lightgrey;
}

.cell img {
  width: 20px;
  height: 20px;
  display: none;
}

.cell.active img {
  margin-top: 5px;
  width: 20px;
  height: 20px;
  display: block;
}

答案 3 :(得分：1)

我从未成为::before和::after伪类的粉丝，主要是因为我个人在尝试将内容放入Chrome vs IE时会发现一些奇怪的东西（该死的IE！）。由于这里的大多数人都会使用这些伪类提供解决方案（因为这有点像你提出的那样），我想我会使用flexbox和更多div来提供不同的解决方案。

对于下载大小不是最优的，但我确实认为它不是绝对的定位元素，如果方块变大或变小，则很容易将其作为文件顶部的scss变量处理。这个只使用两个值，即框之间的填充和框的大小，因此它应该易于更新和维护。

无论如何，玩得开心！顺便说一句令人敬畏的问题： - ）

.blocks {
  display: flex;
}

.block {
  flex: 0 0 20px;
  margin: 0px 5px;
  display: flex;
  flex-direction:column;
}

.block > .square {
  flex: 0 0 20px;
  margin: 5px 0px;
  background: grey;
}

.block > .space {
  flex: 0 0 20px;
  margin: 5px 0px;
}

.block.activeCell > .space {
  background: green;
}
<div class="blocks">
  <div class="block activeCell"><div class="square"></div><div class="space"></div></div>
  <div class="block"><div class="square"></div><div class="space"></div></div>
  <div class="block"><div class="square"></div><div class="space"></div></div>
  <div class="block"><div class="square"></div><div class="space"></div></div>
</div>
<div class="blocks">
  <div class="block"><div class="square"></div></div>
  <div class="block"><div class="square"></div></div>
  <div class="block"><div class="square"></div></div>
  <div class="block"><div class="square"></div></div>
</div>

答案 4 :(得分：1)

使用jQuery，您可以在单击时切换该类：

$('.cell').click(function() { //catch clicks on .cell
  $('.cell').removeClass('activeCell'); //remove class "activeCell" from all
  $(this).addClass('activeCell'); //add class "activeCell" to .cell clicked
});

将position: relative;应用于.top和.bottom：

.top,
.bottom {
  position: relative;
}

使用psuedoclass :before在.activeCell

下创建图片 
.activeCell:before {
  content: "";
  position: absolute;
  bottom: -20px;
  height: 20px;
  width: 20px;
  background-image: url("https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png");
  background-size: 20px 20px;
}

删除它：

.walkingMan {
  width: 20px;
  height: 20px;
  display: inline-block
}

而且：

<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" class='walkingMan'/>

要在div .top和.bottom之间添加空格，请在它们之间添加<br>。

$('.cell').click(function() {
  $('.cell').removeClass('activeCell');
  $(this).addClass('activeCell');
});
.cell {
  display: inline-block;
  border: 1px solid black;
  cursor: pointer;
}

.top,
.bottom {
  position: relative;
}

.activeCell {
  background-color: lightgrey;
}

.activeCell:before {
  content: "";
  position: absolute;
  bottom: -20px;
  height: 20px;
  width: 20px;
  background-image: url("https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png");
  background-size: 20px 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <div class='top'>
    <a class='cell activeCell'>One</a>
    <a class='cell'>One</a>
    <a class='cell'>One</a>
    <a class='cell'>One</a>
  </div>
  <br>
  <div class='bottom'>
    <a class='cell'>One</a>
    <a class='cell'>One</a>
    <a class='cell'>One</a>
    <a class='cell'>One</a>
  </div>
</div>

答案 5 :(得分：1)

您可以使用 CSS 执行此类操作。使用:target选择器，您可以将样式应用于需要隐藏/显示的元素。

.container {
	display: inline-block;
	width: 100px;
	height: 200px;
}

.link {
	display: block;
	width: 100px;
	height: 100px;
	background: #ccc;
}
.walking-man {
	display: none;
	width: 100px;
	height: 100px;
	background: red;
}
#p1:target {
	display: block;
}
#p2:target {
	display: block;
}
#p3:target {
	display: block;
}
#p4:target {
	display: block;
}
  height: 90px;
  float: left;
}

.walking-man img {
  width: 100%;
}

.walkin-man:target {
  display: block;
}
<div class="container">
	<a href="#p1" class="link"></a>
	<div id="p1" class="walking-man"></div>
</div>
<div class="container">
	<a href="#p2" class="link"></a>
	<div id="p2" class="walking-man"></div>
</div>
<div class="container">
	<a href="#p3" class="link"></a>
	<div id="p3" class="walking-man"></div>
</div>
<div class="container">
	<a href="#p4" class="link"></a>
	<div id="p4" class="walking-man"></div>
</div>

相关问题
最新问题