Как сделать, чтобы скрипт работал для определенного ID в html?

Question

[Artem26rus7]

<div class="container">
			<div class="row">
				<div class="col-md-4">
					<div id="text_box" onmouseover="changeItem()" onmouseout="rechangeItem()">
						<div id="mouse"></div>
						<h2>Бесплатная доставка</h2>
						<p>Заполнив заявку на нашем сайте, мы доставим мишку за 2 часа. Так же мы осуществляем доставку по всей России, от 3 до 5 дней</p>
					</div>
					<div class="sub-line">
						<div id="circle"></div>
						<div id="line"></div>
					</div>
					<div id="text_box2" onmouseover="changeItem()" onmouseout="rechangeItem()">
						<div id="mouse2"></div>
						<h2>Бесплатная доставка</h2>
						<p>Заполнив заявку на нашем сайте, мы доставим мишку за 2 часа. Так же мы осуществляем доставку по всей России, от 3 до 5 дней</p>
					</div>
					<div class="sub-line">
						<div id="circle2"></div>
						<div id="line2"></div>
					</div>
				</div>
				<div class="col-md-4">
					<img src="img/2605/file.png">
				</div>
				<div class="col-md-4">
				<div class="text_box3">
						<div id="mouse3"></div>
						<h2>Бесплатная доставка</h2>
						<p>Заполнив заявку на нашем сайте, мы доставим мишку за 2 часа. Так же мы осуществляем доставку по всей России, от 3 до 5 дней</p>
					</div>
					<div class="text_box4">
						<div id="mouse4"></div>
						<h2>Бесплатная доставка</h2>
						<p>Заполнив заявку на нашем сайте, мы доставим мишку за 2 часа. Так же мы осуществляем доставку по всей России, от 3 до 5 дней</p>
					</div>
				</div>
				
			</div>
		</div>

.section25 .text_box h2:hover{
	color: red;
	cursor: pointer;
	
}

.section25 #text_box, .section25 .text_box3 {
	margin-top: 50px;
	margin-bottom: 150px;
}

.section25 #mouse, .section25 #mouse2, .section25 #mouse3, .section25 #mouse4 {
        background-image: url(../../img/25/mouse2.png);
		width: 32px;
		height: 32px;
		position: absolute;
		left: -20px;
		background-repeat: no-repeat;
}    

.section25 .sub-line #circle{
	position: absolute;
    width: 15px;
    height: 15px;
    background-color: #d9d9d9;
    border-radius: 50%;
    top: 60px;
    left: 490px;
    cursor: pointer;
    -webkit-transition: background-color 500ms;
    transition: background-color 500ms;
	z-index: 1;
}

.section25 .sub-line #circle2{
	position: absolute;
    width: 15px;
    height: 15px;
    background-color: #d9d9d9;
    border-radius: 50%;
    bottom: -3px;
    right: -108px;
    cursor: pointer;
    -webkit-transition: background-color 500ms;
    transition: background-color 500ms;
	z-index: 1;
}

.section25 .sub-line #line{
	width: 0;
    height: 1px;
    position: absolute;
    left: 320px;
    top: 68px;
	z-index: 1;
	cursor: pointer;
    background-color: #d9d9d9;
    will-change: width;
    -webkit-transition: width 1000ms cubic-bezier(0.445, 0.05, 0.55, 0.95), background-color 500ms;
    transition: width 1000ms cubic-bezier(0.445, 0.05, 0.55, 0.95), background-color 500ms;
}

.section25 .sub-line #line2{
	width: 51px;
    height: 1px;
    position: absolute;
    bottom: -3px;
    right: -108px;
	z-index: 1;
	cursor: pointer;
    background-color: #d9d9d9;
    will-change: width;
    -webkit-transition: width 1000ms cubic-bezier(0.445, 0.05, 0.55, 0.95), background-color 500ms;
    transition: width 1000ms cubic-bezier(0.445, 0.05, 0.55, 0.95), background-color 500ms;
}

.section25 .sub-line #line:hover{
	width: 200px;
}

function changeItem() {
	document.getElementById('line').style.width = '170px';
	document.getElementById('circle').style.background = 'red';
	document.getElementById('mouse').style.backgroundPosition = '0 -32px';
}
	function rechangeItem() {
	document.getElementById('line').style.width = '0';
	document.getElementById('circle').style.background = '';
	document.getElementById('mouse').style.backgroundPosition = '';
}

Comments

[Dima Polos]

А при каком событии он должен работать? При клике или наведении мышкой?

[Artem26rus7]

Dima Polos, наведении мышкой

Answer 1

[Dima Polos]

Вам надо при наведении мышкой скрыть блок? Это без js делается;) Поищите hover css

Comments

[Artem26rus7]

Нет, не скрыть. При наведении мышкой блок подсвечивается красным. Линия от блока идет в право к кружку. Я скрины предоставил до и после, как это все происходит. Мне нужно, чтобы этот скрипт работал с определенным блоков. Мне нужно на js

[Dima Polos]

Artem26rus7, почему вы уверены, что на js? Такое можно на css написать. Вы хотите анимацию?

[Artem26rus7]

Dima Polos, Не получается на css.
.section25 .text_box:hover ~ .sub-line .circle{
background-color: red;
} не работает
.section25 .text_box:hover + .sub-line .circle{
background-color: red;
} не работает

Может я что то не правильно делаю

[Artem26rus7]

Artem26rus7, Все получилось. Всем спасибо

Answer 2

[Ice]

Положите .sub-line в #text_box и используйте this в контексте функции

Comments

[Artem26rus7]

Можете подробно написать, куда писать "this" пожалуйста. Я в javascript не разбираюсь