He creado una lista ul y en cada elemento li he colocado imágenes, el caso es que desktop cuando hago hover encima de estas imágenes se despliega una capa sobre la imagen que ya tenia previamente oculta, en esa capa se muestra información de la imagen. Cuando hago ya no paso el cursor por encima de la imagen esta capa se vuelve a ocultar. El problema es que en versión móvil el efecto hover no funciona como en desktop sino que hay que hacer uno y hasta dos click encima de la imagen para que pueda mostrar esta capa con información.
he creado este código en javascript para que en dispositivos móviles al hacer un click tipo tap me muestre la información:
$(".item").on('click touchend', function(e) {
var mediaquery = window.matchMedia("(max-width: 767px)");
if (mediaquery.matches)
{
// mediaquery yes
$(".menu-desc").css("left", "0px");
}
else
{
// mediaquery no
}
});//click event
funciona para lo que necesito el problema es que detecta el click en una de las cajitas, aparece la información en todas las cajitas a la vez, lo cual no es lo deseado, si el touched se hace en una de las cajitas solo en esa debe aparecer la información, y asi sucesivamente. No puedo hacer referencia a las cajitas por medio de un id ya que no tengo control de cuantas cajitas se crean, ya que estas cajitas se van agregando por medio de un panel de administración de contenido. Pueden haber tantas cajitas como el usuario quiera, entonces no se cómo hacer para que me detecte exactamente cada cajita de forma individual.
Cómo podría lograr esto? La idea es sustituir hover, en versión móvil.
Código de las cajitas:
<ul id="menu-pricing" class="menu-price">
<?php
for ($j=0; $j <count($categories); $j++)
{
?>
<li class="item <?php echo $categories[$j][1];?>">
<a href="#">
<img src="admin/<?php echo $categories[$j][4];?>" class="img-responsive" alt="Referenzen Works" >
<div class="menu-desc text-center">
<span>
<h3><?php echo $categories[$j][5];?></h3>
<?php
if ($categories[$j][6] !== "empty")
{
?>
<h4><?php echo $categories[$j][6]; ?></h4>
<?php
}
?>
</span>
</div>
</a>
</li>
<?php
} //for
?>
</ul>
HTML resultante:
<ul id="menu-pricing" class="menu-price">
<li class="item aqui-va-una-clase-definida-por-el-usuario">
<a href="#">
<img src="admin/public/imagen.png" class="img-responsive" alt="Referenzen Works" >
<div class="menu-desc text-center">
<span>
<h3>Titulo principal de cada box</h3>
<h4>Subtitulo de cada box (este es opcional,el usuario elige si lo quiere poner o no)</h4>
</span>
</div>
</a>
</li>
</ul>
La información en las cajitas viene desde la base de datos.
Este es el css:
/** menu-pricing list **/
#images_li_options_container
{
margin-left: 0px !important;
margin-right: 0px !important;
padding-left: 0px !important;
padding-right: 0px !important;
}
#images_li_options_container .row
{
padding-left: 0px !important;
padding-right: 0px !important;
}
#menu-pricing {
display: block;
width: 100%;
padding: 50px 0px 25px 0px;
margin-bottom: 0;
text-align: left;
}
#menu-pricing .item {
background-color: white;
/*box-shadow: 0px 2px 5px white; #948E8E;*/
display: none;
/*opacity: 0;*/
vertical-align: top;
margin-bottom: 0px;
margin-right: 0px;
color: #fff;
text-align: center;
width: 33.1%;
height: 220px;
-moz-box-sizing: border-box;
}
#menu-pricing .item a {
display: inline-block;
max-width: 100%;
max-height: 220px;
text-decoration: none;
background: #fff;
text-align: center;
}
@media (min-width: 991px) {
#menu-pricing .item:nth-child(7),
#menu-pricing .item:nth-child(8),
#menu-pricing .item:nth-child(9) {
margin-bottom: 0px;
}
}
@media (min-width: 1200px)
{
#images_li_options_container.container {
width: 100% !important;
}
}
/* --======================== for hover direction =============================-- */
.menu-price li a,
.menu-price li a img {
display: block;
position: relative;
}
.menu-price li a {
overflow: hidden;
color: #fff;
}
.menu-price li a .menu-desc {
position: absolute;
font-size: 14px;
background: rgba(255, 255, 255, 0.7); /*rgba(29, 136, 197, 0.4); blue */
width: 100%;
height: 100%;
top: 0px;
left: -100%;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.menu-price li a .menu-desc span h3 {
font-size: 30px;
margin-bottom: 15px;
}
.menu-price li a:hover .menu-desc {
left: 0px;
}
#menu-pricing .item img {
max-width: 100%;
height: 220px;
text-align: center;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
}
#menu-pricing .item:hover img
{
-webkit-transform: scale(1.8);
-moz-transform: scale(1.8);
-o-transform: scale(1.8);
transform: scale(1.8);
}
.menu-price li a:hover .menu-desc span {
display: block;
/*color: rgba(255,255,255,0.9);*/
font-size: 23px;
padding: 22% 20px;
line-height: 23px;
color: black !important;
font-weight: bold !important;
}
@media
querys ? asi solo a los moviles le aplicas ciertos CSS.$(".menu-desc #" + e.target.id ).css("left", "0px");
esto recuperara y el selector qudaria asi $(".menu-desc #box-2") por ejemplo! tambien podrias publicar el codigo html generado por el php ya que como es de js no necesitamos ver el php!