|
|||
Prev/Next-Pfeil bewegt sich mit Cursor mit
Liebe Community,
ich bin ein absoluter HTML / CSS-Anfänger, würde aber gerne wissen, wie man folgenden Effekt programmieren kann: - der Prev- bzw. Next-Pfeil bewegt sich auf einem Bild mit dem Cursor mit - Anklicken also an jeder beliebigen Stelle auf der linken bzw. rechten Bildhälfte möglich - in der Mitte des Bildes wechselt der Pfeil die Richtung Beispiel: Bureau Collective ? Textilmuseum St.Gallen Campaign |
Sponsored Links |
|
|||
mittels cursor() kannst du den Cursor festlegen, du legst einfach zwei divs über dein Bild, welche jeweils 50% des Bildes abdecken (links und rechts)
Dann noch: Code:
div.links:hover{ cursor: url('pfeil-links.gif'); } |
Sponsored Links |
|
|||
Leider habe ich diese Variante der Slider-Pfeile noch nicht gelöst bekommen. Für die linke Seite habe ich das Cursor-Help-Symbol eingesetzt (um sicher zu gehen, dass ich den Code an der richtigen Stelle umgeschrieben habe). Für die rechte Seite habe ich eine url mit Verweis auf eine png/gif/cur-Datei angegeben – die auch gefunden wird – der Pfeil erscheint aber trotzdem nicht. Was habe ich vergessen bzw. was muss ich evtl. noch beim HTML-Code ändern?
Vielen Dank für die Hilfe! Code:
.controls{ width: 50%; height: 100%; position: absolute; left: 0; right: 0; } .next-slide:hover{ width: 50%; height: 100%; display: inline-block; text-align: center; cursor: url(img/pfeil-rechts.gif), url(img/pfeil-rechts.png), url(img/pfeil-rechts.cur), auto; } .prev-slide:hover{ width: 50%; height: 100%; display: inline-block; text-align: center; cursor: help; } .single-portfolio{ position: relative; } .single-portfolio-slider{ width: 100%; } .owl-carousel.single-portfolio-slider, .single-portfolio-slider .owl-item{ padding:0; } .single-portfolio-slider img{ max-width: 100%; } .controls-portfolio .next-slide{ position: absolute; display: inline-block; text-align: center; width: 50%; height: 100%; top: 0px; right: 0px; } .controls-portfolio .next-slide:hover{ cursor: url(img/pfeil-rechts.gif), url(img/pfeil-rechts.png), url(img/pfeil-rechts.cur), auto; } .controls-portfolio .prev-slide{ position: absolute; display: inline-block; text-align: center; width: 50%; height: 100%; top: 0px; left: 0px; } .controls-portfolio .prev-slide:hover{ cursor: help; } |
|
|||
Entschuldigung! Der sieht folgendermaßen aus:
HTML-Code:
<!DOCTYPE html> <html class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>…</title> <meta name="description" content=""> <meta name="msapplication-tap-highlight" content="yes" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0" /> <!-- Google Web Font --> <link href='http://fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> <!-- Bootstrap 3--> <link rel="stylesheet" href="css/bootstrap.min.css"> <!-- OWL Slider --> <link rel="stylesheet" href="css/owl.carousel.css"> <link rel="stylesheet" href="css/owl.theme.css"> <!-- Web Icons Font --> <link rel="stylesheet" href="css/pe-icon-7-stroke.css"> <link rel="stylesheet" href="css/iconmoon.css"> <link rel="stylesheet" href="css/et-line.css"> <!-- Tabs --> <link rel="stylesheet" type="text/css" href="css/tabs.css" /> <link rel="stylesheet" type="text/css" href="css/tabstyles.css" /> <!-- Costum Styles --> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <!-- Favicon --> <link rel="icon" type="image/ico" href="favicon.ico"> <!-- Modernizer & Respond js --> <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script> </head> <body> <div class="preloader"> <span class="load"></span> </div> <div class="menu-wrap"> <div class="menu-content"> <div class="container"> <div class="row"> <div class="navigation"> <p>…<p/> <span class="pe-7s-left-arrow close-menu" id="close-button"></span> <div class="menu-logo hidden-xs"> </div> </div> </div> <div class="col-md-8 col-md-offset-2 col-xs-12"> <nav class="menu"> <div class="menu-list"> <ul> <li><a href="index-2column.html">…</a></li> <li><a href="about.html">…</a></li> <li><a href="contact.html">…</a></li> </ul> </div> </nav> </div> </div> </div> </div> </div> <div class="header"> <div class="container"> <div class="logo"> <a href="index.html"> </a> </div> <button class="main-menu-indicator" id="open-button"> <span></span> </button> </div> </div> <div class="container"> <div class="margin-top single-portfolio"> <div class="owl-carousel single-portfolio-slider"> <div> <img src="img/…/…" alt="…"> </div> <div class="controls-portfolio"> <a class="prev-slide"</a> <a class="next-slide"</a> </div> </div> <div class="content-portfolio"> <div class="row"> <p class="text-center">…<br>…</p> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer-wrapper"> <div class="footer-content"> <span class="move-all"> <a href="index-2column.html">…</a> </span> <div/> </div> </div> </footer> <script src="js/vendor/jquery-1.11.2.min.js"></script> <script src="js/vendor/bootstrap.min.js"></script> <script src="js/vendor/classie.js"></script> <script src="js/vendor/isotope.pkgd.min.js"></script> <script src="js/vendor/waypoints.min.js"></script> <script src="js/vendor/jquery.counterup.min.js"></script> <script src="js/vendor/owl.carousel.min.js"></script> <script src="js/vendor/tabs.js"></script> <script src="js/arabella.js"></script> </body> </html> |
|
|||
ich probiere mal herum, aber ich würde mal damit anfangen, das html fehlerfrei zu bekommen:
Code:
<a class="prev-slide"</a> <a class="next-slide"</a> Edit: Mit korrektem HTML funktioniert das CSS bei mir. Geändert von cloned (20.04.2017 um 14:55 Uhr) |
|
|||
Danke! Hier kommt der Code vorsichtshalber nochmal komplett fehlerfrei:
HTML-Code:
<!DOCTYPE html> <html class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>…</title> <meta name="description" content=""> <meta name="msapplication-tap-highlight" content="yes" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0" /> <!-- Google Web Font --> <link href="http://fonts.googleapis.com/css?family=Inconsolata:400,700" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"> <!-- Bootstrap 3--> <link rel="stylesheet" href="css/bootstrap.min.css"> <!-- OWL Slider --> <link rel="stylesheet" href="css/owl.carousel.css"> <link rel="stylesheet" href="css/owl.theme.css"> <!-- Web Icons Font --> <link rel="stylesheet" href="css/pe-icon-7-stroke.css"> <link rel="stylesheet" href="css/iconmoon.css"> <link rel="stylesheet" href="css/et-line.css"> <!-- Tabs --> <link rel="stylesheet" type="text/css" href="css/tabs.css" /> <link rel="stylesheet" type="text/css" href="css/tabstyles.css" /> <!-- Costum Styles --> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <!-- Favicon --> <link rel="icon" type="image/ico" href="favicon.ico"> <!-- Modernizer & Respond js --> <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script> </head> <body> <div class="preloader"> <span class="load"></span> </div> <div class="menu-wrap"> <div class="menu-content"> <div class="container"> <div class="row"> <div class="navigation"> <p>…</p> <span class="pe-7s-left-arrow close-menu" id="close-button"></span> <div class="menu-logo hidden-xs"> </div> </div> </div> <div class="col-md-8 col-md-offset-2 col-xs-12"> <nav class="menu"> <div class="menu-list"> <ul> <li><a href="index-2column.html">…</a></li> <li><a href="about.html">…</a></li> <li><a href="contact.html">…</a></li> </ul> </div> </nav> </div> </div> </div> </div> <div class="header"> <div class="container"> <div class="logo"> <a href="index.html"></a> </div> <button class="main-menu-indicator" id="open-button"> <span></span> </button> </div> </div> <div class="container"> <div class="margin-top single-portfolio"> <div class="owl-carousel single-portfolio-slider"> <div> <img src="img/…/…" alt="Portfolio"> </div> </div> <div class="controls-portfolio"> <a class="prev-slide"></a> <a class="next-slide"></a> </div> </div> <div class="content-portfolio"> <div class="row"> <p class="text-center">…<br>…</p> </div> </div> </div> <footer> <div class="container"> <div class="footer-wrapper"> <div class="footer-content"> <span class="move-all"> <a href="index-2column.html">…</a> </span> </div> </div> </div> </footer> <script src="js/vendor/jquery-1.11.2.min.js"></script> <script src="js/vendor/bootstrap.min.js"></script> <script src="js/vendor/classie.js"></script> <script src="js/vendor/isotope.pkgd.min.js"></script> <script src="js/vendor/waypoints.min.js"></script> <script src="js/vendor/jquery.counterup.min.js"></script> <script src="js/vendor/owl.carousel.min.js"></script> <script src="js/vendor/tabs.js"></script> <script src="js/arabella.js"></script> </body> </html> |
|
|||
Guten Morgen,
leider funktioniert es bei mir immer noch nicht (habe den Nachtrag gestern nicht gesehen), trotz fehlerfreiem HTML. Ich habe nach wie vor den pointer-cursor? Was könnte denn noch ein Grund sein? |
Sponsored Links |
|
|||
Das weiß ich nicht, eventuell werden deine Elemente nicht korrekt positioniert? Hast du schon mit den Entwicklertools des Browsers überprüft, ob auch alle Elemente korrekt liegen und angesprochen werden im CSS? Du kannst dort auch den :hover Zustand simulieren.
Bei deinem Beispiel ist es schwer, den Fehler zu finden, da viel zu viel Code gepostet wurde. Interessant ist für uns ein Code, den man zB auf jsfiddle.net einfügen kann und man das Problem sofort sieht. Dabei auch urls zu Bildern beachten, wir haben deine Bilder nicht Hier noch ein Bsp welches funktioniert, so ein auf ein minimum reduziertes Code-Beispiel deinerseits ist wünschenswert, wenn es immer noch nicht funktioniert: Füge den Code auf jsfiddle.net ein (html ins html, css ins css Fenster) und du siehst, dass es funktioniert. Code:
HTML: <div> <a class="prev-slide"></a> <a class="next-slide"></a> </div> CSS: div{width: 500px; height: 200px; position: relative; } a{display:block; width: 50%;position: absolute; height: 100%; background-color: rgba(140, 140, 140, .5)} a.next-slide{right: 0;} a:hover{ cursor: url(http://www.web-toolbox.net/webtoolbox/css/cur138.jpg), auto; } a.next-slide:hover{ cursor: url(http://www.web-toolbox.net/webtoolbox/css/weihnacht02.gif), auto; } |
Sponsored Links |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
2 Boxen floaten nicht runter und Pfeil fehlt obwohl definiert | Andimau | CSS | 9 | 14.09.2011 17:12 |
HTML Pfeil | SpecialFighter | (X)HTML | 21 | 02.09.2011 22:56 |
Pfeil an CSS-Box | Cyborg | CSS | 2 | 29.07.2011 19:17 |
Navigation / Pfeil | Solander | CSS | 5 | 07.08.2010 14:18 |
link hover mit Pfeil | Freexer | CSS | 0 | 26.11.2009 20:20 |