我正在尝试使用由jQuery中的“ onmouseover”触发的函数来更改div元素的高度。但是,当我将鼠标悬停在元素上时,什么也没有发生。控制台中没有错误,据我所知这应该正常工作。任何建议将不胜感激。感谢您的帮助。
function lowerRaise() {
var getHeiggt = document.getElementsByClassName('searchItem')[0];
var tehHeiegt = jQuery(getHeiggt).height();
var allTIms = document.getElementsByClassName('searchItem');
if (tehHeiegt > 0) {
for (i = 0; i < allTIms.length; i++) {
jQuery(allTIms[i]).height("9px");
jQuery(allTIms[i]).css("padding-top", "3px");
jQuery(allTIms[i]).css("padding-bottom", "10px");
}
} else {
for (i = 0; i < allTIms.length; i++) {
jQuery(allTIms[i]).height("0px");
jQuery(allTIms[i]).css("padding-top", "0px");
jQuery(allTIms[i]).css("padding-bottom", "0px");
}
}
}
.searchItem {
height: 9px;
transition: 0.3s;
background-color: white;
color: black;
padding: 3px 0px 10px 6px;
border-bottom: 1px solid lightgrey;
cursor: pointer;
}
.searchItem a {
display: block;
color: black;
text-decoration: none;
}
.searchItem a:hover {
display: block;
color: black;
text-decoration: none;
}
.searchItem:hover {
background-color: lightgrey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form onmouseover="lowerRaise()" role="search" method="get" class="search-form" action="/">
<label>
<span class="screen-reader-text">Search for:</span>
<input autocomplete="off" type="search" class="search-field" placeholder="Search …" value="" name="s">
</label>
<input type="submit" class="search-submit" value="Search">
</form>
<div id="searchDrop" style="transition: 0.5s;">
<div class="searchItem"><a style="" href="/?s=dress">Dresses</a></div>
<div class="searchItem">Sweaters</div>
<div class="searchItem">Blouses</div>
<div class="searchItem">Pants</div>
<div class="searchItem">Tops</div>
<div class="searchItem">T-Shirts</div>
<div class="searchItem">Skirts</div>
<div class="searchItem">Shirts</div>
<div class="searchItem">Blazers</div>
</div>