질문/공유질답게시판

메뉴 hover, 빈공간 없애기 여쭤봅니다 ^^; (해결완료)

모르핀

어제 여쭤봤던 질문의 연장선입니다..아고.. 머리가 아프네요 아직 아침도안먹고 소스대입,수정만 2시간정도 한듯싶네요..ㅎㅎ

 

어제 여쭤봤던거보다 매우 약간의 진도는 나갔습니다..ㅎㅎ;

 

적용 사이트는 http://operaviva7.cafe24.com/page_PKpf33 입니다.

 

첫번째 여쭤볼점은 

 

#side_cssmenu ul li.has-sub > a:after {
  content: url(red.png); 
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -6px;
 }
 

이렇게 소스를 넣어 아래와같이 content로 red.png 파일을 불러오고 있습니다.

남은것은 마우스 오버시에 red.png 파일을 동일폴더상에 blue.png 로 바꾸는 것입니다.

 

어제 답변달아주신것과같이 hover 를 이용하여 여러방법을 시도해보았는데 제가 한 방법으로는

 

content: url(red.png); 부분(옆에 네모난 색깔박스부분)만이 아닌 마우스오버된 메뉴부분 전체가 blue.png 로 바뀌어 버리네요 

 

#side_cssmenu > ul > li:hover a {
content: url(blue.png); 
  background: #f3f3f3;

} 이렇게 소스를 적용하였을 때 그렇구요 여기서 좀 더 진도가 나가면 오른쪽 content 부분만 바꿀 수 있을 거 같기도합니다.

 

팁 부탁드립니다 __)

 

 

 error.png

 

두번째 여쭤볼점은

 

바로 위 사진을 보시면 아시겠지만 붕붕붕 및 붕붕붕부분에 보시면 텍스트 좌측에 약간의 공간이 벌어져 있는것을 보실 수 있습니다.

active has-sub 라고, 해당 메뉴에 들어갔을 경우 좌측에 공간이 벌어지는 현상입니다.

 

요소검사로도 원인을 찾을수가없네요 도움 부탁드립니다. ㅜ..ㅜ 소스를 3일동안 수정하고 쳐다봤으니 구조가 잘 이해가 됬음 좋겠는데 쉽지가않네요..ㅜ.ㅜ

 

http://operaviva7.cafe24.com/board_sUvE85 페이지 입니다.

 

 

 

 

 

위로 아래로
댓글 9
  • profile
    #side_cssmenu > ul > li a:hover:after {content:url(blue.png)} 이렇게 하면 되려나요

    두번째것은 #cssmenu > ul > li.has-sub > a { 의 padding-right: 0px; 을 한번 지워보세요..
  • profile profile
    답변 정말 감사드립니다!

    말씀해주신대로하여 두번째꺼는 해결되었습니다! 저건 또 왜 못봤을까요......ㅜㅜㅋ

    아쉽게 첫번째껀 안되네요.. 머리가아파서 좀만 쉬었다가 다시 여러방법을 시도해봐야겠어요...... 인터넷에 검색해서 나오는것들도 적용해보고 배워가면서 하고있는데

    될거같은데 안되서 쪼끔 제 자신에 화가나는군요 ㅎㅎ
  • profile profile

    음 예제에서는 되는 것 같은데 이상하네요. ㅎㅎ 암튼 뭐.. css 야 원래 저장>확인의 무한 루프.. ㅠㅠ 즐겁게하세요~! 

    <style>
.abc > li:after {content:"ABC"; color:green}
.abc > li {color:blue}
.abc > li:hover {color:red}
.abc > li:hover::after {color:yellow}
</style>

<ul class="abc">
<li>ABC</li>
</ul>

     

  • profile profile
    예제까지 알려주시고 감사합니다 현재 참조하여 수정작업을 시도하고있습니다 고맙습니다..^^ 잘 되면 좋겠네용
  • profile

    !??????엥????????

    모두 해결됬습니다 ㅋㅋㅋㅋㅋ

    뭐가문젠진 모르겠지만 고쳐졌습니다 ㅋㅋㅋㅋㅋㅋ 그냥 소스들을 한번 정리해보면서 천천히 썼떤 태그들을 다시 적용해보았는데 됐습니다

    injin 님의 :after 부 분이 큰 도움이 된거같네요 즐겁군요

    후후후 고맙습니다 맘편히 조금 쉬어야겠네요

  • profile
    혹시 2번쨰것은 왼쪽에 흰공백 말씀하시는거라면.. #cssmenu와 #cssmenu ul 의 width를 100%로 바꿔보세용
  • profile
    노력에 박수를!!; 저 같은 경우는 365일을 그렇게 매번 삽질을 하고 있어요 ㅠ_ㅠ)/ 힘내세요!!
  • profile profile
    네 이렇게 조금씩 배우다보면 실력이 늘거라고 생각하고 하고있어요

    안늘고 또 까먹을까봐 한편으론 또 걱정입니다.. 대입하지말고 소스자체가 왜 그렇게되는지 잘 이해를 해야하는데..ㅎㅎ
  • profile profile
    많이 해볼 수 밖에요 ㅎ;