Попытка изменить положение div при нажатии с помощью js

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) { 
 
\t 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

может быть, это поможет вам, запустить свой фрагмент кода и проверить его

$('.icon').click(function(){ 
 
\t $('.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)'); 
 
})

.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 { 
 
\t margin: 0 0 18 0; 
 
\t font-weight: lighter; 
 
\t -webkit-margin-before: 0px; 
 
\t -webkit-margin-after: 18px; 
 
\t -webkit-margin-start: 0px; 
 
\t -webkit-margin-end: 0px; 
 
}

<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>