CODEWITHSUNDEEP
htmlcss
Pramod Gangadar
Pramod Gangadar

Reputation: 292

Change pointer style for <a> without href value

The page linked here contains a row of 3 images that display text on mouse-over. I want to stick to the way I did it with without specifying a value to href attribute because I don't want the tiles linked anywhere. I just want some text to show when cursor moves over the image. I'm looking for help to

  1. To stop the image from sending the user to top of the page when the hover-over text is clicked. Or make the hover-over unclickable.
  2. Changed pointer style to normal arrow style when mouse moves over the image.

Here is the code written for this particular section:

<!-- START SEAMLESS GIFTING FOR EVERY OCCASION -->
<?php if( have_rows('seamless_gifting') ): while( have_rows('seamless_gifting') ): the_row(); 
$title_text = get_sub_field('title_-_text');
?>
<div class="seamless-gifting front-page-row" id="row2">
  <div class="wrap-x">
    <div class="inside">
      <div class="row seamless-gifting-title"><?php echo $title_text; ?></div>
      <div class="row compact">
        <?php if ( have_rows( 'occasion_column' ) ) : while ( have_rows( 'occasion_column' ) ) : the_row(); 
        $image = get_sub_field( 'gift_-_image' );
        $title_text = get_sub_field( 'title_-_text' );
        $hover_text = get_sub_field( 'hover_-_text' );
        ?>

        <div class="col col-xs-12 col-sm-6 col-lg-4">
          <a href="#" class="block h-100 bg-white-base transition" target="" title="">
            <div class="relative image">
              <?php if($hover_text): ?>
              <div class="textarea relative pt pb pl pr no-touch select-none">
                <div class="bg-white-base pl pr">
                  <article class="center-xs"><?php echo $hover_text; ?></article>
                </div>
              </div>
              <?php endif; ?>
              <?php if($image): ?>
              <div class="object-cover-wrap">
                <picture>
                  <source media="(max-width: 360px)" srcset="<?php echo($image['sizes']['xsmall']); ?>">
                  <source media="(max-width: 640px)" srcset="<?php echo($image['sizes']['small']); ?>">
                  <source media="(max-width: 1024px)" srcset="<?php echo($image['sizes']['medium']); ?>">
                  <source srcset="<?php echo($image['sizes']['large']); ?>">
                  <img src="<?php echo($image['sizes']['large']); ?>" alt="<?php echo $image['alt']; ?>" />
                </picture>
              </div>
              <?php endif; ?>
            </div>
          </a>
          <div class="pt pb pl pr center-xs title transition">
            <h3 class="mb0 h5 transition">
              <?php echo $title_text; ?>
            </h3>
          </div>
            </a>
                  </div>
        <?php endwhile; ?>
        <?php endif; ?>
      </div>
    </div>
  </div>
</div>
<?php endwhile; endif; ?>
<!-- END SEAMLESS GIFTING FOR EVERY OCCASION -->

Below is the image of the section I'm talking about. enter image description here

Upvotes: 0

Views: 76

Answers (1)

Mosia Thabo
Mosia Thabo

Reputation: 4267

From this:

<a href="#" class="block h-100 bg-white-base transition" target="" title="">

Change to this (remove href="#" and add tabIndex="0"):

<a tabIndex="0" class="block h-100 bg-white-base transition">

What href="#" does is, it changes the URl by appending # at the end of the url and that causes the browser to react and in your case it forces a page scroll to the top.

After you remove href, the <a> element will now act like an ordinary inline element like span without keyboard tab capabilities. So you must proceed to add tabIndex="0" to make it tab-able in the case your viewer uses a keyboad.

Upvotes: 1

Related Questions