JS nach Hover Box wieder verschwinden lassen

[Cc_Cc_Cc]

hi,

ich weiß leider nicht wie ich die Box wieder verschwinden lasse, wenn ich auf den Usernamen drauf bin (mit hover) oder auf der Box die erscheinen soll.

In der versteckten Box wird die Anzahl der Fans usw angezeigt. Sollte ich auf der Box drauf sein sollte die nicht verschwinden, nur wenn ich mit meiner Maus jetzt z.b die Box verlasse.

 Spoiler

PHP Code:

<a class="username" href="u.php?u= <?= $row['id']; ?>" value="<?= $row['ident']; ?>">Username</a>

<div class="box box-<?= $row['ident']; ?>" style="display:none;">
    <p>Fans</p>
</div>

 Spoiler

<script>
	$('.username').hover(function() {
		var value = $(this).attr('value');
		
		$('.box-'+value+'').css('display', 'block');
	})
</script>

Gibt es irgendeine Funktion, wo die Box automatisch verschwindet, wenn man nicht mehr auf der Box ist oder halt auf den Usernamen?

__
Als Video:

 Spoiler

[...♚]

<script>
	$('.username').hover(function() {
		var value = $(this).attr('value');
		
		$('.box-'+value+'').show();
	},function() {
               	var value = $(this).attr('value');
		
		$('.box-'+value+'').hide();
        })
</script>

Aber wenn du eh schon jQuery nutzt, nutz am besten die Funktionen



Die zweite funktion wird gecalled wenn du nicht mehr hoverst.

[Cc_Cc_Cc]

Originally Posted by ...♚

<script>
	$('.username').hover(function() {
		var value = $(this).attr('value');
		
		$('.box-'+value+'').show();
	},function() {
               	var value = $(this).attr('value');
		
		$('.box-'+value+'').hide();
        })
</script>

Aber wenn du eh schon jQuery nutzt, nutz am besten die Funktionen



Die zweite funktion wird gecalled wenn du nicht mehr hoverst.

Danke dir ^^

[iMostLiked]

Na ja, du kannst das ganze auch nur mit CSS lösen.
Hier die CSS Lösung:

.username:hover + .box {
    display: block !important;
}

PS: Dieses +'' nach value

$('.box-'+value+'').show();

ist unnötig. Geht auch so:

$('.box-'+value).show();

[Cc_Cc_Cc]

Originally Posted by iMostLiked

Na ja, du kannst das ganze auch nur mit CSS lösen.
Hier die CSS Lösung:

.username:hover + .box {
    display: block !important;
}

PS: Dieses +'' nach value

$('.box-'+value+'').show();

ist unnötig. Geht auch so:

$('.box-'+value).show();

War mir gar nicht bewusst mit Value aber nice jetzt weiß ich bescheid^^.

Kurze Frage hinweg, geht dieses Script mit .hover auch mit click? Habs versucht keine Fehlermeldung kommt , jedoch erscheint auch keine Box.

 Spoiler

PHP Code:

        $(document).ready(function() {
        
            $('.userhover').on('click', (function() {
            
                var value = $(this).attr('value');
                
                alert(value);
            
                $('.show_user-+value).show();
                }, function() {
                    var value = $(this).attr('value');
                    
                    $('.show_user-+value).hide();
            }))
        
        }) 


[iMostLiked]

Originally Posted by Cc_Cc_Cc

War mir gar nicht bewusst mit Value aber nice jetzt weiß ich bescheid^^.

Kurze Frage hinweg, geht dieses Script mit .hover auch mit click? Habs versucht keine Fehlermeldung kommt , jedoch erscheint auch keine Box.

 Spoiler

PHP Code:

        $(document).ready(function() {
        
            $('.userhover').on('click', (function() {
            
                var value = $(this).attr('value');
                
                alert(value);
            
                $('.show_user-+value).show();
                }, function() {
                    var value = $(this).attr('value');
                    
                    $('.show_user-+value).hide();
            }))
        
        }) 


Du hast da 1.) ein einfaches Anführungszeichen nach +value vergessen und 2.) kannst du nicht wirklich ein else bei einem Klick haben. Geht theoretisch schon, unterstützt die oben verwendete jQuery Funktion aber nicht. Ansonsten müsste ja direkt nachdem du den Mausklick loslässt, die Box verschwinden. :P

 Spoiler

$(document).ready(function() {
    $('.userhover').on('click', (function() {	
	var value = $(this).attr('value');
        $('.show_user-'+value).show();
    }));
});

Damit die Box verschwindet, müsstest du einfach einen Klick außerhalb der Box abfangen und die Box dann entsprechend verschwinden lassen.