XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   (X)HTML (http://xhtmlforum.de/forumdisplay.php?f=72)
-   -   Prev/Next-Pfeil bewegt sich mit Cursor mit (http://xhtmlforum.de/showthread.php?t=73162)

Lillydust 22.02.2017 14:01

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

cloned 22.02.2017 14:03

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');
}


Lillydust 22.02.2017 20:38

Vielen Dank für die schnelle Antwort! Ich hoffe, ich bekomme das hin ;)

Lillydust 20.04.2017 15:04

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;

}


cloned 20.04.2017 15:10

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.

Lillydust 20.04.2017 15:30

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>


cloned 20.04.2017 15:48

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.

Lillydust 20.04.2017 16:13

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>


Lillydust 21.04.2017 08:58

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?

cloned 21.04.2017 09:07

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;
}



Alle Zeitangaben in WEZ +2. Es ist jetzt 02:57 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Search Engine Friendly URLs by vBSEO 3.6.0
© Dirk H. 2003 - 2017