---
title: Mauszeiger als dicker Kreis mit „drag“
description: "## Aufgabe: Die Maus in einem bestimmten Bereich einer Website als einen dicken Kreis darstellen. ## Lösung: ### Class für den Bereich Gib der Row / Section / dem Modul das beim Überfahren die geänderte Maus anzeigen soll die class:…"
url: "https://wp-help.support/docs/mauszeiger-als-dicker-kreis-mit-drag/"
updated: "2025-02-05"
category: CSS Tricks
tags:
  - trivago
---

# Mauszeiger als dicker Kreis mit „drag“

## Aufgabe:

Die Maus in einem bestimmten Bereich einer Website als einen dicken Kreis darstellen.

## Lösung:

### Class für den Bereich

Gib der Row / Section / dem Modul das beim Überfahren die geänderte Maus anzeigen soll die class: *drag-cursor*.

### Row für die geänderte Maus

Füge eine Row in deine Website ein - setze die *padding-top und -bottom auf 0.*

### Textmodul für die geänderte Maus

Erstelle ein Textmodul das den Text innerhalb des Kreis enthält und lege die folgenden Einstellungen fest:

*Background: gewünschte Farbe*
*Text Color: gewünschte Farbe*
*Text-Alignment: center*
*Width: 100px (oder wie gewünscht)*
*Height: 100px (oder wie gewünscht)*
*Rounded Corners: 100px*
*Class: thecursor*
*Position: fixed*
*Z index: 10*

Füge dem Main Element den folgen Code hinzu

```
transition: all .1s linear;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
```

### Code Modul für die styles und das JS

Füge ein Code Modul hinzu und setze die CSS und das JS an - denke daran die beiden Codes mit *<style></style>* bzw. *<script></script>* Tags einzusetzen

```
.hide-cursor {
	cursor: none;
}
.thecursor {
	-webkit-transition: all 0.2s ease !important;
	-moz-transition: all 0.2s ease !important;
	-o-transition: all 0.2s ease !important;
	transition: all 0.2s ease !important;
	visibility: hidden;
	opacity: 0;
}
.show-cursor {
	visibility: visible !important;
	opacity: 1;
}
```

```
jQuery(document).ready(function($){
	var cursor = $('.thecursor');
 		$('.drag-cursor').mousemove(function(e){
 			cursor.css({
			top: e.clientY - cursor.height() / 2,
			left: e.clientX - cursor.width() / 2
	});
	cursor.addClass('show-cursor');
		$('body').addClass('hide-cursor');
 	});
 	$('.drag-cursor').mouseleave(function() {
 		cursor.removeClass('show-cursor');
		$('body').removeClass('hide-cursor');
	});
});
```

## Ergebnis:

Fahre mit der Maus über den grauen Bereich.

drag