How to make the script work for a specific ID in html?

5bbce228c738d876488052.png5bbce43d6bf66878220176.png
<div class="container">
 <div class="row">
 <div class="col-md-4">
 <div id="text_box" onmouseover="changeItem()" onmouseout="rechangeItem()">
 <div id="mouse"></div>
 <h2>free shipping</h2>
 <p>Filling out an application on our website, we will deliver the bear for 2 hours. We deliver all over Russia, from 3 to 5 days</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>free shipping</h2>
 <p>Filling out an application on our website, we will deliver the bear for 2 hours. We deliver all over Russia, from 3 to 5 days</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>free shipping</h2>
 <p>Filling out an application on our website, we will deliver the bear for 2 hours. We deliver all over Russia, from 3 to 5 days</p>
</div>
 <div class="text_box4">
 <div id="mouse4"></div>
 <h2>free shipping</h2>
 <p>Filling out an application on our website, we will deliver the bear for 2 hours. We deliver all over Russia, from 3 to 5 days</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';
}
 rechangeItem function() {
 document.getElementById('line').style.width = '0';
 document.getElementById('circle').style.background = ";
 document.getElementById('mouse').style.backgroundPosition = ";
}
March 12th 20 at 08:01
2 answers
March 12th 20 at 08:03
Solution
You have to hover the mouse to hide the block? This is done without js;) Try hover css
No, not to hide. When you hover the mouse block is highlighted in red. The line from block goes to the right to the mug. I have provided screenshots of before and after, how it all happens. I need to make this script work with certain blocks. I need to js - coleman.R commented on March 12th 20 at 08:06
@coleman.R, why do you believe that in js? Is it possible in css to write. You want animation? - Cheyanne_Smith commented on March 12th 20 at 08:09
@Cheyanne_Smith, does Not work on css.
.section25 .text_box:hover ~ .sub-line .circle{
background-color: red;
} not working
.section25 .text_box a:hover + .sub-line .circle{
background-color: red;
} not working

Maybe I do not correctly make - coleman.R commented on March 12th 20 at 08:12
@coleman.R, it worked. Thank you all - coleman.R commented on March 12th 20 at 08:15
March 12th 20 at 08:05
Put .sub-line in #text_box and use this in the function context
Can write, where to write "this" please. In javascript I do not understand - coleman.R commented on March 12th 20 at 08:08

Find more questions by tags HTMLJavaScriptCSS