Question

不重复;我正试图不使用JavaScript。

目前我有一个幻灯片，当鼠标悬停在其上时会出现标题。我需要在悬停在它上方时出现标题和箭头，现在当我将鼠标悬停在箭头上时，它们会出现并且标题消失。当我将鼠标悬停在图像上时，我需要它们。

（当悬停图像/标题时）

（当徘徊在arrrow时）

CSS

.slide {
    display:inline-block;
    position: relative;
}
.slide img {

    display:block;
    max-width:100%;
    height: 300px;
    width: 500px;
 }
.slide img:hover + .slide-caption {
    opacity: 1;
}
.slide-title {
    margine:0 0 1rem;
}
.slide-caption {
    position: absolute;
    right: 0;
    bottom: 16px;
    left: 0;
    padding: 1rem;
    color: white;
    background-color: rgba( 0, 0, 0, 0.5 );
    opacity:0;
}
.slide-caption:hover {
    opacity: 1;
}
.previous {
    position: absolute;
    bottom: 16px;
    left: 0;
    opacity: 0;
    background-color: rgba( 0, 0, 0, 0.5);
}
.previous:hover {
    opacity:1;
}
.slide img:hover + .previous {
    opacity: 1;
}

.slide-caption:hover + .previous {
    opacity: 1;
}
.next {
    position: absolute;
    bottom: 16px;
    opacity: 0;
    right: 0;
    background-color: rgba( 0, 0, 0, 0.5);
}
.next:hover {
    opacity:1;
}
.slide img:hover + .next {
    opacity: 1;
}

.slide-caption:hover + .next {
    opacity: 1;
}

HTML（PHP）

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    if ($_POST['action'] == 'Previous') {
        $index = $_POST['i'];
        if ($index == 0) {
            $index = count($pic_array) - 1;
            echo "<div class='slide'>
                     <img src= ".$dir.$pic_array[$index]." />
                     <div class='slide-caption'>
                        <h3 class='slide-title'> $titles[$index] </h3>
                        <p> $descriptions[$index] </p>
                     </div>
                  </div>";
        }
        else {
            $index--;
            echo "<div class='slide'>
                     <img src= ".$dir.$pic_array[$index]." />
                     <div class='slide-caption'>
                        <h3 class='slide-title'> $titles[$index] </h3>
                        <p> $descriptions[$index] </p>
                     </div>
                  </div>";
        }
        echo '<form action="gallery.php" method="post">
        <input type="submit" name="action" value="Previous">
        <input type="submit" name="action" value="Next">';
        echo "<input type='hidden' name='i' value= '$index'' >";

    }
    if ($_POST['action'] == "Next") {
        $index = $_POST['i'];
        if ($index == count($pic_array) - 1) {
            $index = 0;
            echo "<div class='slide'>
                     <img src= ".$dir.$pic_array[$index]." />
                     <div class='slide-caption'>
                        <h3 class='slide-title'> $titles[$index] </h3>
                        <p> $descriptions[$index] </p>
                     </div>
                  </div>";
        }
        else {
            $index++;
            echo "<div class='slide'>
                     <img src= ".$dir.$pic_array[$index]." />
                     <div class='slide-caption'>
                        <h3 class='slide-title'> $titles[$index] </h3>
                        <p> $descriptions[$index] </p>
                     </div>
                  </div>";
        }

        echo '<form action="gallery.php" method="post">
        <input type="submit" name="action" value="Previous">
        <input type="submit" name="action" value="Next">';
        echo "<input type='hidden' name='i' value= '$index' >";


    }

} else {
    $index = 1;
    echo '<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>';
    echo "<div class='slide'>
            <img src= ".$dir.$pic_array[$index]." />
            <div class='slide-caption'>
                <h3 class='slide-title'> $titles[$index] </h3>
                <p> $descriptions[$index] </p>
            </div>";
    echo "<form action='gallery.php' method='post'>
            <div class='previous'>
                <button value='Previous' name='action'>
                    <i class='fa fa-arrow-left fa-2x'></i>
                </button>
            </div>
            <div class='next'>
                <button value='Next' name='action'>
                    <i class='fa fa-arrow-right fa-2x'></i>
                </button>
            </div>
            </div>
            <br>
    <input type='hidden' name='i' value= '$index'>
   </form>";

HTML（已处理）

<html><head><link rel="stylesheet" type="text/css" href="gallery.css"><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"><style type="text/css"></style></head><body><div class="slide">
            <img src="http://dev2.matrix.msu.edu/~matrix.training/Holmberg_Dane/potd-husky_3235255k.jpg">
            <div class="slide-caption">
                <h3 class="slide-title"> dog </h3>
                <p> dog </p>
            </div><form action="gallery.php" method="post">
            <div class="previous">
                <button value="Previous" name="action">
                    <i class="fa fa-arrow-left fa-2x"></i>
                </button>
            </div>
            <div class="next">
                <button value="Next" name="action">
                    <i class="fa fa-arrow-right fa-2x"></i>
                </button>
            </div>
            </form></div>
            <br>
            <!--<button class='next' name='action' value='Next'></button>
            <div class='prev'>
                <input type='submit' name='action' value='Previous'>
            </div>
            <div class='next'>
                <input type='submit' name='action' value='Next'>
            </div>-->
            <input type="hidden" name="i" value="1">



<!--<img src= http://dev2.matrix.msu.edu/~matrix.training/Holmberg_Dane/ />


<a href="?index=<br />
<font size='1'><table class='xdebug-error xe-notice' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Notice: Use of undefined constant php - assumed 'php' in /matrix/home/matrix.training/public_html/Holmberg_Dane/gallery.php on line <i>184</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0019</td><td bgcolor='#eeeeec' align='right'>246688</td><td bgcolor='#eeeeec'>{main}(  )</td><td title='/matrix/home/matrix.training/public_html/Holmberg_Dane/gallery.php' bgcolor='#eeeeec'>.../gallery.php<b>:</b>0</td></tr>
</table></font>
">next</a>-->




</body></html>

将鼠标悬停在图像上时，我的箭头会显示幻灯片

0 个答案: