zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Prev/Next-Pfeil bewegt sich mit Cursor mit

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.02.2017, 14:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.02.2017
Beiträge: 10
Lillydust befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.02.2017, 14:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.700
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

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');
}
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.02.2017, 20:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.02.2017
Beiträge: 10
Lillydust befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank für die schnelle Antwort! Ich hoffe, ich bekomme das hin
Mit Zitat antworten
  #4 (permalink)  
Alt 20.04.2017, 15:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.02.2017
Beiträge: 10
Lillydust befindet sich auf einem aufstrebenden Ast
Standard

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;
}
Mit Zitat antworten
  #5 (permalink)  
Alt 20.04.2017, 15:10
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.700
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

gibt es auch ein html zu deinem css? am besten html + css code so zur verfügung stellen, dass wir das Problem genau nachvollziehen können wenn wir es nachbauen.
Mit Zitat antworten
  #6 (permalink)  
Alt 20.04.2017, 15:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.02.2017
Beiträge: 10
Lillydust befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
  #7 (permalink)  
Alt 20.04.2017, 15:48
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.700
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

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>
Da fehlt das abschließender > bei jedem a-Tag.

Edit:
Mit korrektem HTML funktioniert das CSS bei mir.

Geändert von cloned (20.04.2017 um 15:55 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 20.04.2017, 16:13
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.02.2017
Beiträge: 10
Lillydust befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
  #9 (permalink)  
Alt 21.04.2017, 08:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.02.2017
Beiträge: 10
Lillydust befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 21.04.2017, 09:07
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.700
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

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;
}
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
2 Boxen floaten nicht runter und Pfeil fehlt obwohl definiert Andimau CSS 9 14.09.2011 18:12
HTML Pfeil SpecialFighter (X)HTML 21 02.09.2011 23:56
Pfeil an CSS-Box Cyborg CSS 2 29.07.2011 20:17
Navigation / Pfeil Solander CSS 5 07.08.2010 15:18
link hover mit Pfeil Freexer CSS 0 26.11.2009 21:20


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:50 Uhr.