Html 将鼠标悬停在图像上时显示幻灯片的箭头
不重复；我尽量不使用JavaScript来实现这一点 目前我有一个幻灯片，当鼠标悬停在上面时，会出现一个标题。我需要的标题和箭头出现时，悬停在它和现在，当我悬停在箭头本身，他们出现和标题消失。当我将鼠标悬停在图像上时，我需要它们都出现 （悬停图像/标题时） （将鼠标悬停在行上时） CSS HTML（PHP）Html 将鼠标悬停在图像上时显示幻灯片的箭头,html,css,hover,slideshow,Html,Css,Hover,Slideshow,不重复；我尽量不使用JavaScript来实现这一点 目前我有一个幻灯片，当鼠标悬停在上面时，会出现一个标题。我需要的标题和箭头出现时，悬停在它和现在，当我悬停在箭头本身，他们出现和标题消失。当我将鼠标悬停在图像上时，我需要它们都出现 （悬停图像/标题时） （将鼠标悬停在行上时） CSS HTML（PHP） if（$\u服务器['REQUEST\u METHOD']=='POST'）{ 如果（$_POST['action']=='Previous'）{ $index=$_POST['i']；
if（$\u服务器['REQUEST\u METHOD']=='POST'）{
如果（$_POST['action']=='Previous'）{
$index=$_POST['i']；
如果（$index==0）{
$index=count（$pic_数组）-1；
回声“
$titles[$index]
$descriptions[$index]
";
}
否则{
$index--；
回声“
$titles[$index]
$descriptions[$index]
";
}
回声'
';
回声“
.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;
}
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><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>