我正在制作一个关于音乐的网页,如下所示:
每年有 15 首歌曲被排列在另一首下方,重复相同的模式(除了其他不相关的内容,这将是其中col
的一首main
)。
我想要的是,当我将鼠标悬停在视频上时,数字会改变它的外观(我同意让它变大,但如果它振荡或其他什么会更好,目前这并不重要),当我把它移到外面时iframe 的限制,数量恢复正常。
代码如下:
while($fila = mysqli_fetch_assoc($resultados))
{
$enlace_youtube = $fila['enlace_youtube'];
$titulo_cancion = utf8_encode($fila['titulo_cancion']);
$nombre_autor = utf8_encode($fila['nombre_autor']);
$enlace_rym = $fila['enlace_rym'];
$nombre_ciudad = utf8_encode($fila['nombre_ciudad']);
$nombre_pais = utf8_encode($fila['nombre_pais']);
$votos_facebook = $fila['votos_facebook'];
$tipo = $fila['tipo'];
$titulo_disco = utf8_encode($fila['titulo_disco']);
$ano = $fila['ano'];
$id_cancion = $fila['id_cancion'];
$inicio = strpos($enlace_youtube, "watch?v=");
$enlace_youtube = substr_replace($enlace_youtube, "embed/", $inicio, 8);
if(strpos($nombre_autor, ", The")) $nombre_autor = "The ".substr($nombre_autor, 0, strpos($nombre_autor, ", The"));
$decada = substr($ano, 0, 3)."0s";
if(strpos($titulo_disco, "/")) $nombre_foto = substr($titulo_disco, 0, strpos($titulo_disco, "/"));
elseif(strpos($titulo_disco, ":")) $nombre_foto = substr($titulo_disco, 0, strpos($titulo_disco, ":"));
else $nombre_foto = $titulo_disco;
if($condicion == true) $ano_disco = '('.$ano.')';
else $ano_disco = null;
$count++;
echo '<div class ="row contenedor-youtube pt-4"><iframe id="video" width="575" height="323.5" src='.$enlace_youtube.' allowfullscreen></iframe></div>'; #Vídeo
?>
<div class="row pt-2"> <!-- Portada, información y sistema de votación -->
<div class="contenedor-portada mr-2"> <!-- Portada -->
<?php echo '<img id="portada" src="imagenes/'.$decada.'/'.$ano.'/'.$nombre_foto.'.jpg" width="150" height="150">'; ?>
</div>
<div class="col"> <!-- Información y sistema de votación -->
<div class="row"> <!-- Información (con clasificación) -->
<div class="mr-3"> <?php echo '<span id="numero">'.$count.'</span>'; ?> </div> <!-- Clasificación -->
<div class="col informacion"> <!-- Información -->
<div class="row"><?php echo '<div class="puntos"><span class="titulos">'.$titulo_cancion.'</span> de <span><a id="autor" href="'.$enlace_rym.'" target="_blank">'.$nombre_autor.'</a></span></div>'; ?></div>
<div class="row"><?php echo '<div class="puntos">('.$nombre_ciudad.', '.$nombre_pais.')</div>'; ?></div>
<div class="row"><?php echo '<div class="puntos">Incluida en su '.$tipo.' <span class="titulos">'.$titulo_disco.'</span> '.$ano_disco.'</div>'; ?></div>
<div class="row "><?php echo '<span id="votos">'.$votos_facebook.' </span>'; if($votos_facebook == 1) echo 'voto'; else echo 'votos'; ?></div>
</div>
</div>
<div class="row"> <!-- Sistema de votación -->
<span class="estrellas mt-3 ml-2">
<?php if($_SESSION['conectado']) for($i = 1; $i <= 5; $i++) echo '<input type="radio" name="'.$id_cancion.'" value="'.$i.'"><i></i>'; ?>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function()
{
$('#video').mouseover(function()
{
$('#numero').css("font-size", "62.5px");
});
$('#video').mouseout(function()
{
$('#numero').css("font-size", "50px");
});
});
</script>
<?php
}
这来自对数据库的调用,因此通过 while 循环,它一个接一个地呈现每首歌曲的所有相关信息。
重要的是视频:
echo '<div class ="row contenedor-youtube pt-4"><iframe id="video" width="575" height="323.5" src='.$enlace_youtube.' allowfullscreen></iframe></div>';
号码:
<div class="mr-3"> <?php echo '<span id="numero">'.$count.'</span>'; ?> </div>
使用您的 CSS 样式:
#numero {
color: mediumvioletred;
font-weight: bold;
font-size: 50px;
font-family: 'Rock Salt', cursive;
padding: 10px;
text-shadow: 5px 5px 4px pink;
transition: all 0.25s ease;
}
还有 jQuery 脚本(这是我第一次尝试使用 JS):
<script type="text/javascript">
$(function()
{
$('#video').mouseover(function()
{
$('#numero').css("font-size", "62.5px");
});
$('#video').mouseout(function()
{
$('#numero').css("font-size", "50px");
});
});
</script>
好吧,问题是我不能使用addClass()
它,因为然后什么都没有发生(我猜是因为数字有 aid
而不是 a class
),所以为了检查它是否不是基本的 jQuery 语法错误,我把它放进去css()
并且有一个一定的反应,但有限:取决于它id
是否class
给我们关心的两个元素,视频和数字,行为是不同的,但在任何情况下都不能令人满意;就像现在一样,将指针移到视频上时,数字变大,移开时,数字变小,但仅发生在第一个视频中,其余 14 个没有反应;如果不是id="video"
我放class="video"
然后(我想,我是从昨天做的测试中记忆中说的)它继续只对第一个数字做出反应,但是当你将鼠标移到任何视频上时,等等,尝试四种不同的组合。
简而言之:当且仅当它与视频交互时,我如何让每个数字做出反应。我直觉我必须以某种方式关联每个视频和每个数字,就像我对单选按钮所做的那样,将它分配给id_cancion
来自数据库的那个:
<?php if($_SESSION['conectado']) for($i = 1; $i <= 5; $i++) echo '<input type="radio" name="'.$id_cancion.'" value="'.$i.'"><i></i>'; ?>
我留下了什么烂摊子。感谢您读到这里。
该属性
id
必须是唯一的,因此当您使用Jquery函数时,选择器('#video')
仅将其应用于第一个(您应避免使用带有id
内部循环的元素,因为这将导致多个元素具有相同的id
. 如有必要,它们具有它,通常使用自动增量,id
因此它不完全相同)。我将从id
视频中删除 并将其更改为一个类,这是一个可以在整个页面中重复的属性。你的也一样<span>
,应该id="numero"
改成class="numero"
.但接下来我们会遇到一个新问题:我们如何检测正在制作的视频
mouseenter/mouseleave
?好吧,通过 selectorthis
,在我们的例子中,它将引用触发事件的元素。您的Javascript将如下所示:查询
以这种方式,
this
引用.contenedor-youtube
鼠标进入/退出的元素,我们在DOMnext()
中查找其紧随其后的兄弟元素(在我们的例子中是),并且我们查找具有类和的该元素的子元素那就是我们应用样式更改的那个。div class="row pt-2"> <!-- Portada, información y sistema de votación -->
find()
.numero
它适用于更具体的 id ,但它只适用于第一个。您不需要弄乱 JS,使用悬停伪类和 css 中的相邻兄弟选择器,您可以: