Cakephp でjQuery を使ってみる - 情弱エンジニアのなかのblog

マウスオーバーした時に枠線を表示する

CakePHPで記事を投稿するサイトを作っているのですが、マウスオーバーで反応があるものを作りたいと思い簡単ではありますがjQueryを使ってマウスオーバーで記事に枠線をつけたので手順等記載していきます。

1. jsファイルを作る

まずはjsファイルを作るのですが、CakePHPではjsファイルは基本的にwebrootの中のjsフォルダの中に入れていきます。 (jQueryのライブラリーも入れておいてください)

cssファイルや画像ファイルも入れる場所があります。

さて重要な中身ですが、記事をマウスオーバーするとその記事の周りにグレーの枠線が出るようにしました。

$(function(){

  $(".article_chunk").mouseover(function(){
      //記事にマウスが重なっている間は枠線を出す
      $(this).css("outline","5px solid #e6e6e6");
  });

});

これで枠線はつくのですがこれだと枠線が出っぱなしで消えなくなってしまうので

$(function(){

  $(".article_chunk").mouseover(function(){
      //記事にマウスが重なっている間は枠線を出す
      $(this).css("outline","5px solid #e6e6e6");
  }).mouseout(function(){
      //記事からマウスが離れたら枠線を消す
      $(this).css("outline","");
  });

});

こうすることで、マウスが離れると枠線が消えます。

$(this).css("outline","");

mouseoverで指定したcssの値を"“にすれば解決できます。

また「border」を使うとレイアウトが崩れてしまったので「outline」を使いました。

2. 記事一覧のビュー

記事一覧側はまずjQueryを読み込みます

    <?php echo $this->Html->script('jquery-3.2.0.min.js'); ?>
    <?php echo $this->Html->script('jsファイル名.js'); ?>

これでwebroot/js内のjsファイルを読み込みます。

続いて記事のひとまとめでclassを指定すればオーケーです。

<div class="article_chunk">

//記事を表示する処理

</div>

以上になります。それでは