程式設計雜筆

[程設雜筆] :hover ::after ::before和jquery onclick onmouseover onmouseout用法解析

今天要實作一個button,當滑鼠滑過時,會增加一個外框,而當滑鼠按下時,也增加相同的外框。相反地,當滑鼠再次點擊或離開時,解除外框。我用到兩種方法,一個是CSS的,一個是jquery的。

首先先介紹CSS的方法,這個方法會用到:hover。詳細程式碼如下:


h6.eraserCheck{
outline:none;
position:relative;
font-weight:300;
font-size:18px;
color:#000000;
text-transform:lowercase;
padding:4px 8px 4px 8px;
text-align:center;
display:inline-block;
margin:2px 0 2px 0;
cursor:pointer;
}


h6.eraserCheck:hover::after{
content: "";
display: block;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
border-width: 3px;
border-style: solid;
border-color: #1100FF;
}


圖片如下:

然而,以上的程式碼只有cover當滑鼠滑過和離開的部分,想要加上點擊的部分的話,就要配合javascript和jquery。不過,在加上javascript程式碼後,hover的部分仍然不會被解除,而且也沒有任何javascript的方法,可以把這個特性拿掉。也就是說,當button已點擊,而滑鼠又滑過時,就會造成雙倍外框,不太好看。因此,我就用了第二個方法。


 


h6.eraserCheck.active,h6.eraserCheck.hover{
border-width: 3px;
border-style: solid;
border-color: #1100FF;
padding:1px 5px 1px 5px;
}

doc.find('.eraserCheck').on('click',function(e){
  if($(this).hasClass('active'))
    $(this).removeClass('active');
  else
    $(this).addClass('active'); 
}); 
doc.find('.eraserCheck').on('mouseover',function(e){
  $(this).addClass('hover');
});
doc.find('.eraserCheck').on('mouseout',function(e){
  $(this).removeClass('hover');
});

注意到padding的地方,我用了 padding:1px 5px 1px 5px; 把之前的CSS屬性給蓋過去。如果沒有加這條的話,padding會是原先的4px 8px 4px 8px,使我們的button會變大,因此我就事先把boder的width減去了。

參考資料:

http://blog.dimpurr.com/css-before-after/

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s