I am trying to create a hover effect that expands and changes the content of each div when hovered over, and reverts back to its original state on mouseout. To achieve this, I am using MVC partial views:
(Subpages.cshtml)
<div id="subpages" class="mx-auto d-flex justify-content-evenly">
<div class="subpage" id="subpage1">
@Html.Partial("Subpage1Narrow")
</div>
<div class="subpage" id="subpage2">
@Html.Partial("Subpage2Narrow")
</div>
<div class="subpage" id="subpage3">
@Html.Partial("Subpage3Narrow")
</div>
</div>
(Subpage1Narrow.cshtml)
<div class="d-flex align-items-start flex-column" style="width: 456px;">
<p class="subpage__title mb-4 mx-4"><b>Subpage<br>1</b></p>
<br>
<p class="mx-4">...</p>
<button type="button" class="btn btn-danger mt-auto mb-5 mx-4" id="subpage1__button" style="font-family: var(--alt-font)"><b>Learn more <span class="bi bi-arrow-right"></span></b></button>
</div>
(Subpage1Wide.cshtml)
<div class="d-flex flex-column align-items-center mx-auto" style="width: 1368px; height: 681px;">
<p class="text-center subpage__title mb-4 mx-4 mt-auto"><b>Subpage 1</b></p>
<br>
<b class="text-center mb-5 subpage__text--extended">...</b>
<div class="row w-50 text-center mb-3">
<div class="col">
<img src="~/img/ICON1.svg" width="57" height="49">
</div>
<div class="col">
<img src="~/img/ICON2.svg" width="66" height="59">
</div>
<div class="col">
<img src="~/img/ICON3.svg" width="37" height="56">
</div>
</div>
<div class="row w-50 text-center mb-5">
<div class="col">
<b class="d-block subpage__subtitle--extended">1</b>
</div>
<div class="col">
<b class="d-block subpage__subtitle--extended">2</b>
</div>
<div class="col">
<b class="d-block subpage__subtitle--extended">3</b>
</div>
</div>
<button type="button" class="btn btn-danger mt-4 mb-5" id="subpage1__button" style="font-family: var(--alt-font)"><b>Learn more <span class="bi bi-arrow-right"></span></b></button>
</div>
(site.css weird hack but I had issues with other approaches)
#subpages:hover > .subpage:not(:hover) {
width: 0;
}
(HomeController.cs)
public IActionResult GetView(string viewName)
{
return PartialView(viewName);
}
(site.js)
function capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
$(document).ready(function () {
$(".subpage").mouseover(function () {
$(this).load("/Home/GetView", {viewName: `${capitalize($(this).attr('id'))}Wide`})
});
$(".subpage").mouseout(function () {
$(this).load("/Home/GetView", {viewName: `${capitalize($(this).attr('id'))}Narrow`})
});
});
However, I am experiencing some issues with the reliability of this method. The content of the divs flickers when I move my mouse, and sometimes does not revert back on mouseout. As this is my first time combining C# with front-end development, I suspect I may be making a mistake. Is there a solution to this issue, or should I consider a different approach entirely?
Thank you for your assistance.