We Keep Coding

Im trying to create a pop-up box type when hovering over specific text, but the text only hides and does not show further

Im trying to create a pop-up box that will pop-up when you hover over text. The text disappears but it does not reappear when you hover your mouse over it. Any improvements that can be made to the code below?
$(document).ready(function(){
$("clo-t").hide();
$("clo").hover(function(){
$("clo-t").show();,
$("clo-t").hide();
});
})

You should use mouseout and mouseover instead
$(document).ready(function() {
$(".clo").mouseover(() => {
$(".clo-t").show();
}).mouseout(t => {
if (!$(t.target).hasClass("clo-t"))
$(".clo-t").hide();
})
})

How to give a button (class) active hover-status on document ready?

On a website I have 4 clickable buttons (service buttons) on the homepage. They all respond individually to a css hover effect (background-color change) when the user hovers over one of the buttons. So far so god, this is what i want.
CSS:
.service-button:hover {
background: #F7AA06;
color: #1F213F;
}
The FIRST of the four buttons is the most important service. Therefore I want to highlight this button by having it "active" with the hover effect (background-color) when a user first enters the page. If the user hovers over one of the other buttons, the first button should "lose" it's hover-status and return to standard bg-color (white).
My temporary solution so far is to give the first button it's highlighted color with the nth:first-child selector from css. This kind a works as it sets the correct background-color to the first button. The problem is that the button does not change back to standard color if users hovers over on of the other buttons.
Is it possible to accomplish this from just css, or do I need to use jQuery?
https://imgur.com/Jutg3RS
NEW fix! I actually got it working with some jQuery. Guess it's not the cleanest solution, but it does the job! Could/should it be resolved in a better way..?
jQuery(document).ready(function($){
// Add hover class to first button
$('.service-button.totalentreprise').addClass('bg-orange');
$('.service-button').hover(
function() {
// Remove hover class from first button
$('.service-button.totalentreprise').removeClass('bg-orange');
// Add hover class to any button
$( this ).addClass('bg-orange');
}, function() {
$( this ).removeClass('bg-orange');
}
);
});

try these
window.addEventListener('load', function(){
$(".service-button").hover(function(e) {
$(this).css("background-color",e.type === "mouseenter"?"#F7AA06":"transparent")
});
})

JQuery hide contextmenu on body click

JSFiddle Demo
I'm wanting to add two right-click hijack menus on my page and I have one somewhat working above.
Alike it does upon clicking inside of .square, I would like this menu to hide on body click regardless of right or left click.
How can I hide this menu on body click?

Try below code.
jQuery(document).click(function(event) {
if (jQuery(event.target).closest('.square').length === 0) {
//hide your menu here
jQuery('.custom-menu').hide();
}
});
For right click add below code.
jQuery(document).on("contextmenu",function(e){
if (jQuery(event.target).closest('.square').length === 0) {
$('.custom-menu').hide();
}
});

Keep dropdown search box visible by JS

I have expandable search box on toggle click.
I want to change search box to appear on mouse toggle hover, so I changed JS code to this:
jQuery(document).ready(function($) {
$(".search-toggle").hover(function() {
$("#search-container").slideToggle('fast', function() {
$(".search-toggle").toggleClass('active');
});
});
});
But search box disappear immediately when mouse leave toogle - so I can't use search.

Like you asked.
For this to work properly you should have the hover button inside the searchbar container. also check the css i made changes to the opacity and also the width and padding of the searchbar in order to work.
var searchContainer = $("#search-container");
$(".search-toggle").hover(function () {
searchContainer.slideDown('fast');
});
//hide when search button clicked
$('input[type=submit]').on('click', function(){
searchContainer.slideUp('fast');
});
searchContainer.mouseleave(function(){
searchContainer.slideUp();
});
link to your code
Updated Answer:
check here

How to make menu container hide when hovering all but two elements?

So I'm building a small "UberMenu" feature for my main menu, and it works almost as I want, except that I want the UberMenu container to hide if the mouse is not over either
1) the UberMenu button, or
2) the UberMenu container
Right now, if you hover over the UberMenu button, the container shows up, and if you enter the UberMenu container, and then proceed to hover over another menu item, it hides.
This is what I want, however if I hover the UberMenu button, and then immediately hover over another menu item, the container remains open.
I've tried over a dozen different snippets, but I haven't found a solution.
I guess I need some if / else statement added to the code?
Can someone give me some guidance here? Much appreciated! :-)
This is the code I used:
//When mouse hovers UberMenu button, Show Container
$(".uber-menu-test").hover(function(e) {
e.preventDefault(); //To prevent default anchor tag behaviour
e.stopPropagation(); //To prevent parent container click event from firing
$(".uber-menu-frame").show(800);
});
// If mouse hovers either the content area or the navbararea, hide UberMenu container again
$(".block-type-content, .navbararea").mouseenter(function() {
$(".uber-menu-frame").hide(800);
});

I found a solution on my own by adding a timer, I'm not sure how solid this piece of code is, but it does the trick as far as I can tell!
For anyone interested:
$(".uber-menu-test").hover(function(e) {
e.preventDefault(); //To prevent default anchor tag behaviour
e.stopPropagation(); //To prevent parent container click event from firing
$(".uber-menu-frame").show(800);
});
var myTimer = false;
$(".uber-menu-test ,.uber-menu-frame").hover(function(){
//mouse enter
clearTimeout(myTimer);
},function(){
//mouse leav
myTimer = setTimeout(function(){
$(".uber-menu-frame").fadeOut(800);
},100)
});

Hope it helps,
$(".uber-menu-test").mouseenter(function(){
$(".uber-menu-frame").show(800);
}).mouseleave(function(){
$(".uber-menu-frame").hide(800);
});