I am currently working on creating a row of divs that expand when hovered over by the mouse. I have managed to achieve this functionality, but now I want the expanding div to cover its neighboring divs partially, without affecting their sizes or moving them around.
It may be a bit difficult to understand from just the description, but I hope you get the idea.
Furthermore, I would like to retain the JavaScript part because there are additional actions that should occur when hovering over the elements.
Below is the code snippet I have so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
.wrap{
font-size: 160px;
font-weight: bold;
height: 450px;
width: 1100px;
display: flex;
flex-direction: row;
align-items: center;
border-style: solid;
border-width: 1px;
}
.a{
width: 220px;
height: 350px;
border-style: solid;
border-width: 1px;
}
.b{
width: 220px;
height: 350px;
border-style: solid;
border-width: 1px;
}
.c{
width: 220px;
height: 350px;
border-style: solid;
border-width: 1px;
}
.d{
width: 220px;
height: 350px;
border-style: solid;
border-width: 1px;
}
.e{
width: 220px;
height: 350px;
border-style: solid;
border-width: 1px;
}
</style>
<script type="application/javascript">
function enlarge(id){
var element = document.getElementById(id);
element.style.height = "440px";
element.style.width = "260px";
element.style.borderWidth = "1px";
element.style.borderStyle = "solid";
}
function reduce(id){
var element = document.getElementById(id);
element.style.height = "350px";
element.style.width = "220px";
element.style.borderWidth = "1px";
element.style.borderStyle = "solid";
}
</script>
</head>
<body>
<center>
<div class="wrap">
<div class="a" id="a" onmouseover="enlarge(this.id)" onmouseout="reduce(this.id)">A</div>
<div class="b" id="b" onmouseover="enlarge(this.id)" onmouseout="reduce(this.id)">B</div>
<div class="c" id="c" onmouseover="enlarge(this.id)" onmouseout="reduce(this.id)">C</div>
<div class="d" id="d" onmouseover="enlarge(this.id)" onmouseout="reduce(this.id)">D</div>
<div class="e" id="e" onmouseover="enlarge(this.id)" onmouseout="reduce(this.id)">E</div>
</div>
</center>
</body>
</html>
You can also view and interact with the code on jsfiddle: https://jsfiddle.net/fkdvptuz/