How can I achieve a hover effect on mobile devices? [duplicate]

-1

This question already has an answer here:

Equivalent to hover for mobile aps

2 answers

I have created a list ul and in each element I have placed images, the fact is that when I hover over these images in desktop, a layer is displayed over the image that I had previously hidden, in that layer information about the image is displayed. When I do not put the cursor over the image, this layer is hidden again. The problem is that in mobile version the hover effect does not work as in desktop but you have to do two clicks on the image so you can show this layer with information.

I have this code in javascript so that on mobile devices when I touch on each image it will show me the information:

$(".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

this could work for what I need the problem is that when it detects the click in one of the boxes, the information appears in all the boxes at the same time, which is not the desired thing, if the touched is made in one of the boxes only in that box the information should appear. I can not refer to the boxes by means of an id since I have no control of how many boxes are created, since these boxes are being added by means of a content management panel that I created. There may be as many boxes as the user wants, so I do not know how to do it so that I can detect exactly each box individually.

How could I achieve this? The idea is to replace hover, in mobile version.

HTML code:

<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 without php

<ul id="menu-pricing" class="menu-price">



    <li class="item here-go place-a-class-created-by-the-user-in-Adminpanel">

        <a href="#">

            <img src="admin/public/image.png" class="img-responsive" alt="Referenzen Works" >

            <div class="menu-desc text-center">

                <span>

                    <h3>Title of box</h3>



                    <h4>Subtitle of box (optionl)</h4>

                </span>

            </div>

        </a>

    </li>



</ul>

the information in the boxes comes from the database.

CSS Code:

/** 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;

}

edited Nov 21 '18 at 21:44

Magnus Eriksson

7,27041327

asked Nov 21 '18 at 20:58

RolandF

7818

marked as duplicate by miken32, Funk Forty Niner html
Users with the html badge can single-handedly close html questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 21 '18 at 22:46

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

2

how is hover a thing without a (mouse) pointer?

– user10226920
Nov 21 '18 at 21:17

$(".menu-desc").css("left", "0px"); will select all items with that class. You should only get the elements within the current active element: $(this).find('.menu-desc').css("left", "0px");

– Magnus Eriksson
Nov 21 '18 at 21:52

yeah you right, but now the problem is that I use the click event and it displays the information correctly when I click or do scroll on a box but if I click in other box, the information on the before clicked box doesn't hidden. It keeps displayed. The correct behavior should be that when I click on other box the information that was displayed on the last box become hidden.

– RolandF
Nov 21 '18 at 22:01

Before setting the css on the active item, use $('.menu-desc') to hide all.

– Magnus Eriksson
Nov 21 '18 at 22:09

Thank you very much. It's working now. Thanks,

– RolandF
Nov 21 '18 at 22:23

add a comment |

-1

This question already has an answer here:

Equivalent to hover for mobile aps

2 answers

I have this code in javascript so that on mobile devices when I touch on each image it will show me the information:

$(".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

How could I achieve this? The idea is to replace hover, in mobile version.

HTML code:

<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 without php

<ul id="menu-pricing" class="menu-price">



    <li class="item here-go place-a-class-created-by-the-user-in-Adminpanel">

        <a href="#">

            <img src="admin/public/image.png" class="img-responsive" alt="Referenzen Works" >

            <div class="menu-desc text-center">

                <span>

                    <h3>Title of box</h3>



                    <h4>Subtitle of box (optionl)</h4>

                </span>

            </div>

        </a>

    </li>



</ul>

the information in the boxes comes from the database.

CSS Code:

/** 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;

}

edited Nov 21 '18 at 21:44

Magnus Eriksson

7,27041327

asked Nov 21 '18 at 20:58

RolandF

7818

marked as duplicate by miken32, Funk Forty Niner html
Users with the html badge can single-handedly close html questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 21 '18 at 22:46

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

2

how is hover a thing without a (mouse) pointer?

– user10226920
Nov 21 '18 at 21:17

$(".menu-desc").css("left", "0px"); will select all items with that class. You should only get the elements within the current active element: $(this).find('.menu-desc').css("left", "0px");

– Magnus Eriksson
Nov 21 '18 at 21:52

yeah you right, but now the problem is that I use the click event and it displays the information correctly when I click or do scroll on a box but if I click in other box, the information on the before clicked box doesn't hidden. It keeps displayed. The correct behavior should be that when I click on other box the information that was displayed on the last box become hidden.

– RolandF
Nov 21 '18 at 22:01

Before setting the css on the active item, use $('.menu-desc') to hide all.

– Magnus Eriksson
Nov 21 '18 at 22:09

Thank you very much. It's working now. Thanks,

– RolandF
Nov 21 '18 at 22:23

add a comment |

-1

This question already has an answer here:

Equivalent to hover for mobile aps

2 answers

I have this code in javascript so that on mobile devices when I touch on each image it will show me the information:

$(".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

How could I achieve this? The idea is to replace hover, in mobile version.

HTML code:

<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 without php

<ul id="menu-pricing" class="menu-price">



    <li class="item here-go place-a-class-created-by-the-user-in-Adminpanel">

        <a href="#">

            <img src="admin/public/image.png" class="img-responsive" alt="Referenzen Works" >

            <div class="menu-desc text-center">

                <span>

                    <h3>Title of box</h3>



                    <h4>Subtitle of box (optionl)</h4>

                </span>

            </div>

        </a>

    </li>



</ul>

the information in the boxes comes from the database.

CSS Code:

/** 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;

}

edited Nov 21 '18 at 21:44

Magnus Eriksson

7,27041327

asked Nov 21 '18 at 20:58

RolandF

7818

This question already has an answer here:

Equivalent to hover for mobile aps

2 answers

I have this code in javascript so that on mobile devices when I touch on each image it will show me the information:

$(".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

How could I achieve this? The idea is to replace hover, in mobile version.

HTML code:

<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 without php

<ul id="menu-pricing" class="menu-price">



    <li class="item here-go place-a-class-created-by-the-user-in-Adminpanel">

        <a href="#">

            <img src="admin/public/image.png" class="img-responsive" alt="Referenzen Works" >

            <div class="menu-desc text-center">

                <span>

                    <h3>Title of box</h3>



                    <h4>Subtitle of box (optionl)</h4>

                </span>

            </div>

        </a>

    </li>



</ul>

the information in the boxes comes from the database.

CSS Code:

/** 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;

}

This question already has an answer here:

Equivalent to hover for mobile aps

2 answers

javascript php jquery html css

edited Nov 21 '18 at 21:44

Magnus Eriksson

7,27041327

asked Nov 21 '18 at 20:58

RolandF

7818

edited Nov 21 '18 at 21:44

Magnus Eriksson

7,27041327

asked Nov 21 '18 at 20:58

RolandF

7818

edited Nov 21 '18 at 21:44

Magnus Eriksson

7,27041327

edited Nov 21 '18 at 21:44

Magnus Eriksson

7,27041327

edited Nov 21 '18 at 21:44

Magnus Eriksson

7,27041327

asked Nov 21 '18 at 20:58

RolandF

7818

asked Nov 21 '18 at 20:58

RolandF

7818

asked Nov 21 '18 at 20:58

RolandF

7818

marked as duplicate by miken32, Funk Forty Niner html
Users with the html badge can single-handedly close html questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 21 '18 at 22:46

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

marked as duplicate by miken32, Funk Forty Niner html
Users with the html badge can single-handedly close html questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 21 '18 at 22:46

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

2

how is hover a thing without a (mouse) pointer?

– user10226920
Nov 21 '18 at 21:17

$(".menu-desc").css("left", "0px"); will select all items with that class. You should only get the elements within the current active element: $(this).find('.menu-desc').css("left", "0px");

– Magnus Eriksson
Nov 21 '18 at 21:52

yeah you right, but now the problem is that I use the click event and it displays the information correctly when I click or do scroll on a box but if I click in other box, the information on the before clicked box doesn't hidden. It keeps displayed. The correct behavior should be that when I click on other box the information that was displayed on the last box become hidden.

– RolandF
Nov 21 '18 at 22:01

Before setting the css on the active item, use $('.menu-desc') to hide all.

– Magnus Eriksson
Nov 21 '18 at 22:09

Thank you very much. It's working now. Thanks,

– RolandF
Nov 21 '18 at 22:23

add a comment |

2

how is hover a thing without a (mouse) pointer?

– user10226920
Nov 21 '18 at 21:17

$(".menu-desc").css("left", "0px"); will select all items with that class. You should only get the elements within the current active element: $(this).find('.menu-desc').css("left", "0px");

– Magnus Eriksson
Nov 21 '18 at 21:52

yeah you right, but now the problem is that I use the click event and it displays the information correctly when I click or do scroll on a box but if I click in other box, the information on the before clicked box doesn't hidden. It keeps displayed. The correct behavior should be that when I click on other box the information that was displayed on the last box become hidden.

– RolandF
Nov 21 '18 at 22:01

Before setting the css on the active item, use $('.menu-desc') to hide all.

– Magnus Eriksson
Nov 21 '18 at 22:09

Thank you very much. It's working now. Thanks,

– RolandF
Nov 21 '18 at 22:23

how is hover a thing without a (mouse) pointer?

– user10226920
Nov 21 '18 at 21:17

$(".menu-desc").css("left", "0px"); will select all items with that class. You should only get the elements within the current active element: $(this).find('.menu-desc').css("left", "0px");

– Magnus Eriksson
Nov 21 '18 at 21:52

yeah you right, but now the problem is that I use the click event and it displays the information correctly when I click or do scroll on a box but if I click in other box, the information on the before clicked box doesn't hidden. It keeps displayed. The correct behavior should be that when I click on other box the information that was displayed on the last box become hidden.

– RolandF
Nov 21 '18 at 22:01

Before setting the css on the active item, use $('.menu-desc') to hide all.

– Magnus Eriksson
Nov 21 '18 at 22:09

Thank you very much. It's working now. Thanks,

– RolandF
Nov 21 '18 at 22:23

add a comment |

1 Answer
1

active

oldest

votes

Try adding :active. Though because of how quick taps are on mobile, having hover effects is quite pointless. I always reserve hover effects for web on PC. Mobile works nicely with :active.

Alternative would be to add a class through javascript that triggers an animation using keyframes, and remove the class after the length of the animation using a timeout.

Example: https://jsfiddle.net/votnd2zy/

edited Nov 21 '18 at 22:20

answered Nov 21 '18 at 21:06

Marius

867

it doesn't work in this case

– RolandF
Nov 21 '18 at 21:48

Added example in my answer

– Marius
Nov 21 '18 at 22:20

You have to reserve hover effects for desktop because they don't work on mobile....

– pjones235
Nov 21 '18 at 22:31

@pjones235, I disagree. Mobile handles them fine. Also remember some mobile devices work with a stylus, like the S-Pen from Samsung. You can easily hover with them over an element.

– Marius
Nov 22 '18 at 9:00

You can't sufficiently provide a true hover effect.

– pjones235
Nov 26 '18 at 13:39

add a comment |

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Try adding :active. Though because of how quick taps are on mobile, having hover effects is quite pointless. I always reserve hover effects for web on PC. Mobile works nicely with :active.

Alternative would be to add a class through javascript that triggers an animation using keyframes, and remove the class after the length of the animation using a timeout.

Example: https://jsfiddle.net/votnd2zy/

edited Nov 21 '18 at 22:20

answered Nov 21 '18 at 21:06

Marius

867

it doesn't work in this case

– RolandF
Nov 21 '18 at 21:48

Added example in my answer

– Marius
Nov 21 '18 at 22:20

You have to reserve hover effects for desktop because they don't work on mobile....

– pjones235
Nov 21 '18 at 22:31

@pjones235, I disagree. Mobile handles them fine. Also remember some mobile devices work with a stylus, like the S-Pen from Samsung. You can easily hover with them over an element.

– Marius
Nov 22 '18 at 9:00

You can't sufficiently provide a true hover effect.

– pjones235
Nov 26 '18 at 13:39

add a comment |

Try adding :active. Though because of how quick taps are on mobile, having hover effects is quite pointless. I always reserve hover effects for web on PC. Mobile works nicely with :active.

Alternative would be to add a class through javascript that triggers an animation using keyframes, and remove the class after the length of the animation using a timeout.

Example: https://jsfiddle.net/votnd2zy/

edited Nov 21 '18 at 22:20

answered Nov 21 '18 at 21:06

Marius

867

it doesn't work in this case

– RolandF
Nov 21 '18 at 21:48

Added example in my answer

– Marius
Nov 21 '18 at 22:20

You have to reserve hover effects for desktop because they don't work on mobile....

– pjones235
Nov 21 '18 at 22:31

@pjones235, I disagree. Mobile handles them fine. Also remember some mobile devices work with a stylus, like the S-Pen from Samsung. You can easily hover with them over an element.

– Marius
Nov 22 '18 at 9:00

You can't sufficiently provide a true hover effect.

– pjones235
Nov 26 '18 at 13:39

add a comment |

Try adding :active. Though because of how quick taps are on mobile, having hover effects is quite pointless. I always reserve hover effects for web on PC. Mobile works nicely with :active.

Alternative would be to add a class through javascript that triggers an animation using keyframes, and remove the class after the length of the animation using a timeout.

Example: https://jsfiddle.net/votnd2zy/

edited Nov 21 '18 at 22:20

answered Nov 21 '18 at 21:06

Marius

867

Try adding :active. Though because of how quick taps are on mobile, having hover effects is quite pointless. I always reserve hover effects for web on PC. Mobile works nicely with :active.

Alternative would be to add a class through javascript that triggers an animation using keyframes, and remove the class after the length of the animation using a timeout.

Example: https://jsfiddle.net/votnd2zy/

edited Nov 21 '18 at 22:20

answered Nov 21 '18 at 21:06

Marius

867

edited Nov 21 '18 at 22:20

answered Nov 21 '18 at 21:06

Marius

867

answered Nov 21 '18 at 21:06

Marius

867

answered Nov 21 '18 at 21:06

Marius

867

it doesn't work in this case

– RolandF
Nov 21 '18 at 21:48

Added example in my answer

– Marius
Nov 21 '18 at 22:20

You have to reserve hover effects for desktop because they don't work on mobile....

– pjones235
Nov 21 '18 at 22:31

@pjones235, I disagree. Mobile handles them fine. Also remember some mobile devices work with a stylus, like the S-Pen from Samsung. You can easily hover with them over an element.

– Marius
Nov 22 '18 at 9:00

You can't sufficiently provide a true hover effect.

– pjones235
Nov 26 '18 at 13:39

add a comment |

it doesn't work in this case

– RolandF
Nov 21 '18 at 21:48

Added example in my answer

– Marius
Nov 21 '18 at 22:20

You have to reserve hover effects for desktop because they don't work on mobile....

– pjones235
Nov 21 '18 at 22:31

@pjones235, I disagree. Mobile handles them fine. Also remember some mobile devices work with a stylus, like the S-Pen from Samsung. You can easily hover with them over an element.

– Marius
Nov 22 '18 at 9:00

You can't sufficiently provide a true hover effect.

– pjones235
Nov 26 '18 at 13:39

it doesn't work in this case

– RolandF
Nov 21 '18 at 21:48

Added example in my answer

– Marius
Nov 21 '18 at 22:20

You have to reserve hover effects for desktop because they don't work on mobile....

– pjones235
Nov 21 '18 at 22:31

@pjones235, I disagree. Mobile handles them fine. Also remember some mobile devices work with a stylus, like the S-Pen from Samsung. You can easily hover with them over an element.

– Marius
Nov 22 '18 at 9:00

You can't sufficiently provide a true hover effect.

– pjones235
Nov 26 '18 at 13:39

add a comment |

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu