축소판 주위에서 마우스를 가져갈 때 CSS 테두리를 지정하는 방법은 무엇입니까?

미리보기 이미지 주위로 가져 가면 .CSS 테두리를 올바르게 지정하는 방법은 무엇입니까?축소판 주위에서 마우스를 가져갈 때 CSS 테두리를 지정하는 방법은 무엇입니까?

border-color: #cccccc; 
border-style: solid; 
border-width: 1px;

및 호버 : 나는 정상, 썸네일에 대한 외부 CSS를 추가 할

border-color: #0000FF; border-style: solid; border-width: 1px;

HTML :

<div class="item-list"><ul id="field-slideshow-1-pager" class="field-slideshow-pager slides-4"> <li class="first"><a href="#"><img class="field-slideshow-thumbnail field-slideshow-thumbnail-1" typeof="foaf:Image" src="http://ecx.images-amazon.com/images/I/41MNf5JEQ1L._SL75_SS45_.jpg" width="80" height="80" alt="" /></a></li> <li><a href="#"><img class="field-slideshow-thumbnail field-slideshow-thumbnail-2" typeof="foaf:Image" src="http://ecx.images-amazon.com/images/I/410ONnNmmJL._SL75_SS45_.jpg" width="80" height="80" alt="" /></a></li> <li><a href="#"><img class="field-slideshow-thumbnail field-slideshow-thumbnail-3" typeof="foaf:Image" src="http://ecx.images-amazon.com/images/I/41lyduCW9CL._SL75_SS45_.jpg" width="80" height="80" alt="" /></a></li> <li class="last"><a href="#"><img class="field-slideshow-thumbnail field-slideshow-thumbnail-4" typeof="foaf:Image" src="http://ecx.images-amazon.com/images/I/41VHLWxrbcL._SL75_SS45_.jpg" width="80" height="80" alt="" /></a></li> </ul></div>

엄지 손가락 IMG 클래스는 말에 다른 nubmers이 , 확실하지 않습니다.

출처

2012-09-04 fxgreen

사용 :hover 선택 :

.field-slideshow-thumbnail { 
    border-color: #cccccc; 
    border-style: solid; 
    border-width: 1px; 
} 
.field-slideshow-thumbnail:hover { 
    border-color: #0000FF; 
    /*no need to specify border-style and border-width again*/ 
}

당신이 (당신의 웹 페이지로 같은 디렉토리에)라는 파일 style.css 위를 넣어 가정하면, 당신은 적용 할 수있는 스타일에 대한 귀하의 <head> 내부에이를 추가해야합니다 :

<link type = "text/css" rel = "stylesheet" href = "style.css"/>

도움이 되었기를 바랍니다.

출처

2012-09-04 20:20:58 Chris

에게 다시'국경 width'과'국경-style'을 지정합니다 :) – Ana

을 필요가 없습니다 작동 @Ana 하하, 네, 고마워요 :) * 어리석은 실수를 저지른 녀석. * – Chris

'field-slideshow-thumbnail-x'부분은 스타일과 관련이 없습니까? – fxgreen

.field-slideshow-thumbnail 
{ 
    border:solid 1px #ccc; 
} 
.field-slideshow-thumbnail:hover 
{ 
    border:solid 1px #00f; 
}

출처

2012-09-04 20:21:12 Shmiddty

많은 도움을 주셔서 감사합니다. – fxgreen

참고 사항 : 이러한 CSS 구조를 사용할 때? 'a : hover .image { border-color : # cc6600; border-style : solid; border-width : 1px; }' – fxgreen

내 솔루션은 원래보기는 테두리 및 호버보기가없는 경우 국경

.field-slideshow-thumbnail 
{ 
    float:left; 
    /*NO BORDERS HERE*/ 
} 
.field-slideshow-thumbnail:hover 
{ 
    border:solid 1px #00f; 
    /*NOTE that the negative value of margin to prevent the change in spaces */ 
    margin:-1px; 
}

출처

2012-09-04 22:10:46 egystr

축소판 주위에서 마우스를 가져갈 때 CSS 테두리를 지정하는 방법은 무엇입니까?

답변

관련 문제