Question

我正在编辑一个用于平板电脑的网站，但显然没有一个：hover伪类可以使用。

我想移动div以显示与我悬停时相同数量的文本，但是当我点击“up_down_icon.png”时我希望它发生。

这是我的HTML：

<div class="home_1">
    <div class="h_1_text_box">
        <h3>Our Concept</h3>
        <img class="icon" src="up_down_icon.png">
        <p>Text here</p>
    </div>
</div>

CSS：

.h_1_text_box {
background-color: rgba(0, 0, 0, 0.5);
padding: 12px 16px 24px 16px;
color: #ffffff;
font-family: Franklin Gothic;
position: relative;
top: 255px;
transition: 0.5s ease;
}

.h_1_text_box:hover {
position: relative;
top: 171px;
background-color: rgba(0, 0, 0, 0.9);
}

.icon {
width: 24px;
height: 24px;
position: absolute;
top: 11px;
left: 560px;
transition: 0.5s ease;
}

.h_1_text_box:hover > .icon {
transform: rotate(-180deg);
}

我需要知道的是，如何将位置更改应用于.h_1_text_box，具体而言，将其向上移动84px。

答案可能会非常简单，我觉得有点傻，但我的代码对我来说应用JS有点长。我找不到足够的东西来帮助我。如果我必须更改HTML中任何内容的顺序，我不介意。

感谢您的帮助。

Answer 1

只需在您的图标中添加一个事件监听器即可监听点击事件。然后你只需要将一个css类添加到父元素。您已经在css中定义了所需的一切。

这是一个例子。

var upDownIcon = document.getElementsByClassName('icon').item(0);

upDownIcon.addEventListener('click', function(e) {
	e.target.parentNode.classList.toggle('move_up_down');
}, false)

.h_1_text_box {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 12px 16px 24px 16px;
  color: #ffffff;
  font-family: Franklin Gothic;
  position: relative;
  top: 100px;
  transition: 0.5s ease;
}

.h_1_text_box.move_up_down {
  position: relative;
  top: 0px;
  background-color: rgba(0, 0, 0, 0.9);
}

/*
.h_1_text_box:hover {
position: relative;
top: 171px;
background-color: rgba(0, 0, 0, 0.9);
}
*/

.icon {
  width: 24px;
  height: 24px;
  position: absolute;
  top: 11px;
  left: 560px;
  transition: 0.5s ease;

  /* this is just for the span*/
  font-size: 26px;
  cursor: pointer;
}

.h_1_text_box.move_up_down > .icon {
  transform: rotate(-180deg);
}

/*
.h_1_text_box:hover > .icon {
transform: rotate(-180deg);
}
*/

<div class="home_1">
  <div class="h_1_text_box">
    <h3>Our Concept</h3>
    <span class="icon">&#8645;</span>
    <!--<img class="icon" src="up_down_icon.png">-->
    <p>Text here</p>
  </div>
</div>

Answer 2

您可以使用简单的JS -

根据您的要求设置顶部和左侧

document.getElementById("myBtn").style.left = "100px";
document.getElementById("myBtn").style.top = "100px";

Answer 3

此代码段是使用 JS 执行此操作的方法之一：

function toogleClass() {
    var divhasClass = document.getElementById("onlyTouchDevices").classList;
    if (divhasClass.contains("showMore")) {
      divhasClass.remove("showMore");
    } else {
      divhasClass.add("showMore");
    }
  }

.home_1 {
  width: 600px;
  height: 300px;
  margin: 0px 0px 96px 0px;
  overflow: hidden;
  background-color: lightblue;
  background-size: 600px 300px;
  border-radius: 8px;
}
.h_1_text_box {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 12px 16px 24px 16px;
  color: #ffffff;
  font-family: Franklin Gothic;
  position: relative;
  top: 255px;
  transition: 0.5s ease;
}
.showMore {
  position: relative;
  top: 171px;
  background-color: rgba(0, 0, 0, 0.9);
}
.icon {
  width: 24px;
  height: 24px;
  position: absolute;
  top: 11px;
  left: 560px;
  transition: 0.5s ease;
}
.h_1_text_box:hover > .icon {
  transform: rotate(-180deg);
}
h3 {
  margin: 0 0 18 0;
  font-weight: lighter;
  -webkit-margin-before: 0px;
  -webkit-margin-after: 18px;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
}

<div class="home_1">
  <div class="h_1_text_box" id="onlyTouchDevices">
    <h3>Our Concept</h3>
    <img class="icon" src="up_down_icon.png" onclick="toogleClass()" />
    <p>Text here</p>
  </div>
</div>

我在这里所做的只是切换添加/重置您在悬停该元素时使用的top间距的类。

Answer 4

可能会帮助您，运行我的代码段并查看

＆＃13;

$('.icon').click(function(){
	$('.h_1_text_box').css('position','relative');
  $('.h_1_text_box').css('top','171px');
  $('.h_1_text_box').css('background-color','rgba(0, 0, 0, 0.9)');
})

＆＃13;

.home_1 {
    width: 600px;
    height: 300px;
    margin: 0px 0px 96px 0px;
    overflow: hidden;
    background-color: lightblue;
    background-size: 600px 300px;
    border-radius: 8px;
}

.h_1_text_box {
background-color: rgba(0, 0, 0, 0.5);
padding: 12px 16px 24px 16px;
color: #ffffff;
font-family: Franklin Gothic;
position: relative;
top: 255px;
transition: 0.5s ease;
}



.icon {
width: 24px;
height: 24px;
position: absolute;
top: 11px;
left: 560px;
transition: 0.5s ease;
}

.h_1_text_box:hover > .icon {
transform: rotate(-180deg);
}

h3 {
	margin: 0 0 18 0;
	font-weight: lighter;
	-webkit-margin-before: 0px;
	-webkit-margin-after: 18px;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="home_1">
    <div class="h_1_text_box">
        <h3>Our Concept</h3>
        <img class="icon" src="up_down_icon.png">
        <p>Text here</p>
    </div>
</div>

＆＃13;

尝试使用js单击时更改div的位置

4 个答案: