My webpage features a search function with some working code in place.
search.click(function () {
search.attr("src", "Icons/magnifier.png").css({
"border": "2px",
"border-style": "solid",
"border-color": "#000000",
"padding-left": "130px",
"transition": "all 500ms"
});
});
$('html').click(function (e) {
if (e.target.id != 'search') {
$("#search").attr("src", "Icons/magnifier2.png");
$("#search").css({
"border": "2px",
"border-style": "solid",
"border-color": "#c8c8c8",
"padding-left": "4px",
"transition": "all 500ms"
});
}
});
The current functionality changes the icon and expands the border to the left when clicked, which reverts back to normal when the user clicks anywhere else on the page.
Now, I want to implement a hover effect that highlights the search button.
I have the following code:
var search = $("#search");
search.mouseover(function (event) {
search.css({
"border": "2px",
"border-style": "solid",
"border-color": "#808080",
"padding-left": "4px",
"transition": "all 500ms"
});
});
search.mouseout(function (event) {
if (event != ('clicked')) {
search.css({
"border": "2px",
"border-style": "solid",
"border-color": "#c8c8c8",
"padding-left": "4px",
"transition": "all 500ms"
});
}
});
The hover effect works as intended, but when I click on the button and move my mouse away, the mouseout function triggers. I attempted a conditional statement to prevent this behavior, but I know it's incorrect. The hover function should not be active when the border is expanded. How can I address this issue?
If you could provide an explanation along with the solution, I would greatly appreciate it as I am new and trying to learn more about these concepts.