Question

在我的网站上，我有一列带有悬停缩放效果的图片。当鼠标悬停在图像上时，它会增长到原始图像大小的5倍。但是，为了使悬停效果脱离，我必须将鼠标移出页面或放大图像。

例如，如果我将鼠标悬停在它上面时有一张纵向照片，并且它会缩放到5倍尺寸，我无法将图像恢复到正常尺寸，而无需将鼠标从网页浏览或图片上方移开。由于这种效果，我无法缩小图像的大小，因此无法将鼠标完全移离屏幕而无法将鼠标悬停在其上方的图像上。

如何为悬停缩放创建一个效果区域，这样如果我的鼠标不再位于缩放后的图像上，它将再回到原始大小？

＆＃13;

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: 1rem;
  border: 0.1rem solid black;
  max-width: 200px;
  max-height: 200px;
}

div.grow:hover {
  transform: scale(3);
}

＆＃13;

<section id="images" class="image-gallery container">
  <div class="container-content">
    <h2>Image Gallery</h2>
    <div class="content">
      <div class="grow">
        <img src="//via.placeholder.com/300x150">
      </div>
      <div class="grow">
        <img src="//via.placeholder.com/300x150">
      </div>
      <div class="grow">
        <img src="//via.placeholder.com/300x150">
      </div>
      <div class="grow">
        <img src="//via.placeholder.com/300x150">
      </div>
    </div>
  </div>
</section>

＆＃13;

Answer 1

你去了：

<?php
/*
Plugin Name: Post Tracker
Version: 0.1
*/
add_action('admin_menu', 'yt_plugin_setup_menu');

function yt_plugin_setup_menu(){
    add_menu_page( 'Post Tracker Plugin', 'Post Tracker', 'manage_options', 'tracker', 'tracker_init' );
}

//Our class extends the WP_List_Table class, so we need to make sure that it's there
if(!class_exists('WP_List_Table')){
   require_once( ABSPATH . 'wp-admin/includes/class-wp-list-table.php' );
}

class Link_List_Table extends WP_List_Table {

   /**
    * Constructor, we override the parent to pass our own arguments
    * We usually focus on three parameters: singular and plural labels, as well as whether the class supports AJAX.
    */
    function __construct() {
       parent::__construct( array(
      'singular'=> 'yt_tracker_link', //Singular label
      'plural' => 'yt_tracker_links', //plural label, also this well be one of the table css class
      'ajax'   => false //We won't support Ajax for this table
      ) );
    }

    /**
     * Add extra markup in the toolbars before or after the list
     * @param string $which, helps you decide if you add the markup after (bottom) or before (top) the list
     */
    function extra_tablenav( $which ) {
       if ( $which == "top" ){
          //The code that goes before the table is here
          echo"Hello, I'm before the table";
       }
       if ( $which == "bottom" ){
          //The code that goes after the table is there
          echo"Hi, I'm after the table";
       }
    }

    /**
     * Define the columns that are going to be used in the table
     * @return array $columns, the array of columns to use with the table
     */
    function get_columns() {
       return $columns= array(
          'col_id'=>__('ID'),
          'col_post_id'=>__('Post'),
          'col_last_checked'=>__('Last Checked'),
          'col_last_reviewed'=>__('Last Reviewed')
       );
    }

    /**
     * Decide which columns to activate the sorting functionality on
     * @return array $sortable, the array of columns that can be sorted by the user
     */
    function get_sortable_columns() {
       return $sortable = array(
          'col_last_checked'=>'last_checked',
          'col_last_reviewed'=>'last_checked'
       );
    }

    /**
     * Prepare the table with different parameters, pagination, columns and table elements
     */
    function prepare_items() {
       global $wpdb, $_wp_column_headers;
       $screen = get_current_screen();

       /* -- Preparing your query -- */
            $query = "SELECT * FROM yt_tracker";

       /* -- Ordering parameters -- */
           //Parameters that are going to be used to order the result
           $orderby = !empty($_GET["orderby"]) ? mysql_real_escape_string($_GET["orderby"]) : 'ASC';
           $order = !empty($_GET["order"]) ? mysql_real_escape_string($_GET["order"]) : '';
           if(!empty($orderby) & !empty($order)){ $query.=' ORDER BY '.$orderby.' '.$order; }

       /* -- Pagination parameters -- */
            //Number of elements in your table?
            $totalitems = $wpdb->query($query); //return the total number of affected rows
            //How many to display per page?
            $perpage = 5;
            //Which page is this?
            $paged = !empty($_GET["paged"]) ? mysql_real_escape_string($_GET["paged"]) : '';
            //Page Number
            if(empty($paged) || !is_numeric($paged) || $paged<=0 ){ $paged=1; } //How many pages do we have in total? $totalpages = ceil($totalitems/$perpage); //adjust the query to take pagination into account if(!empty($paged) && !empty($perpage)){ $offset=($paged-1)*$perpage; $query.=' LIMIT '.(int)$offset.','.(int)$perpage; }
            /* -- Register the pagination -- */ 
            $this->set_pagination_args( array(
             "total_items" => $totalitems,
             "total_pages" => $totalpages,
             "per_page" => $perpage,
          ) );
          //The pagination links are automatically built according to those parameters

       /* -- Register the Columns -- */
          $columns = $this->get_columns();
          $_wp_column_headers[$screen->id]=$columns;

       /* -- Fetch the items -- */
          $this->items = $wpdb->get_results($query);
    }

    /**
     * Display the rows of records in the table
     * @return string, echo the markup of the rows
     */
    function display_rows() {

       //Get the records registered in the prepare_items method
       $records = $this->items;

       //Get the columns registered in the get_columns and get_sortable_columns methods
       list( $columns, $hidden ) = $this->get_column_info();

       //Loop for each record
       if(!empty($records)){foreach($records as $rec){

          //Open the line
            echo '< tr id="record_'.$rec->id.'">';
          foreach ( $columns as $column_name => $column_display_name ) {

             //Style attributes for each col
             $class = "class='$column_name column-$column_name'";
             $style = "";
             if ( in_array( $column_name, $hidden ) ) $style = ' style="display:none;"';
             $attributes = $class . $style;

             //edit link
             $editlink  = '/wp-admin/link.php?action=edit&link_id='.(int)$rec->link_id;

             //Display the cell
             switch ( $column_name ) {
                case "col_id":  echo '< td '.$attributes.'>'.$rec->id.'< /td>';   break;
                case "col_post_id": echo '< td '.$attributes.'>'.$rec->post_id.'7< /td>'; break;
                case "col_last_checked": echo '< td '.$attributes.'>'.$rec->last_checked.'< /td>'; break;
                case "col_last_reviewed": echo '< td '.$attributes.'>'.$rec->last_reviewed.'< /td>'; break;
             }
          }

          //Close the line
          echo'< /tr>';
       }}
    }

}


function tracker_init() {

    //Prepare Table of elements
    $wp_list_table = new Link_List_Table();
    $wp_list_table->prepare_items();

    //Table of elements
    $wp_list_table->display();

}

?>

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: 1rem;
  border: 0.1rem solid black;
  max-width: 200px;
  max-height: 200px;
}

.grow:hover {
  transform: scale(3);
}

将<section id="images" class="image-gallery container"> <div class="container-content"> <h2>Image Gallery</h2> <div class="content"> <div> <img src="https://i.imgur.com/KEweiIz.jpg" class="grow"> </div> <div> <img src="https://i.imgur.com/KEweiIz.jpg" class="grow"> </div> <div> <img src="https://i.imgur.com/KEweiIz.jpg" class="grow"> </div> <div> <img src="https://i.imgur.com/KEweiIz.jpg" class="grow"> </div> </div> </div> </section>属性分配给class="grow"标记即可。在CSS中，只需将<img>更改为div.grow。

CSS图像缩放功能？

1 个答案: