mouseout 이벤트 해제에 대한 질문있습니다.
본문
안녕하세요. 저는 디자이너입니다. css로 기존 템플릿을 수정하여 홈페이지를 만들고 있습니다.
그중 마우스아웃 이벤트 해제 관련해서 질문이 있습니다.
상단서브이미지 밑으로 텝메뉴로된 하위메뉴를 해제하여 가로로 나열해서 사용할려고 합니다. 모양은 css로 갖춰줬는데, 제이쿼리로 마우스아웃 이벤트가 되어있고 이게 그누보드 jquery-1.12.4.min 파일과 연결이 되어있어 메뉴만 벗어나면 사라졌다 다시나타나는 현상이 있습니다. 전체메뉴에 영향이 갈까봐 이거를 뺄수도 없는 상황이고 제가 제이쿼리를 모르는부분도 있고해서 이부분을 건들수가 없습니다. 수정하고 싶은 이부분만 마우스아웃 이벤트를 해제하거나 상속을 안받을 수 있는 방법이없을까요?
한페이지가 아니라 서브페이지 연결되어있는 메뉴라 다 뒤져봤는데 방법이 없어가지고,
질문드립니다.
답변 4
http://gynemotion.or.kr/theme/emotion/html/css_js/common.js
여기를 보시면
$('.sub_location ul').mouseleave(function(){
$(this).find('ul').slideUp('fast');
$(this).removeClass('on');
});
이 네줄이 질문자님께서 말하는 마우스아웃 이벤트인것 같습니다.
한번 주석처리 하시고 확인해보세요
해당 페이지를 보지 않고서는 답하기가 애매하네요
출력 되는 해당 페이지는 간단하게 되어있습니다.
<?php
$css_file_url = preg_replace("'\/[^/]*\.php$'i", "/", $_SERVER['PHP_SELF']);
$css_file_url = preg_replace("'\/[^/]*\.htm$'i", "/", $css_file_url);
$css_file_url = preg_replace("'\/[^/]*\.html$'i", "/", $css_file_url);
$css_file_url = preg_replace("'\/[^/]*\.php3$'i", "/", $css_file_url);
?>
<link href="<?php echo $css_file_url ?>style<?php if(!$common_css_src) echo ".dt_ori.".substr(str_replace("#",".",$theme_license),0,-11); else echo $common_css_src;?>.css" rel="stylesheet" type="text/css"> <?php //회사소개 관련 css 를 연결합니다. 레이아웃은 한단계 위 css_js/common.css 에서 제어합니다. ?>
<section id="sub_visual">
<div class="backgroundimg">
<div class="visual_area" style="<?php if($SUB_BACKGROUND[$tmenu_]){?>background:url('<?php echo $SUB_BACKGROUND[$tmenu_]?>') no-repeat top center;<?php }?>"></div>
</div>
</section>
<section id="sub_wrapper">
<div id="sub_menu">
<div class="sub_location">
<div>
<div class="cen"><a href="<?php echo G5_URL ?>/index.php"><i class="fa fa-home" aria-hidden="true"></i></a></div>
<ul >
<li>
<ul style="display:inline-block !important; width:900px;">
<?php
// 2차 메뉴는 /theme/스킨명/theme.menu.php 내에서 세팅합니다.
while( list($k,$v) = @each($second_menu[$tmenu_]) ){
?>
<li style="width:170px; float:left; font-size:16px;"><a href="<?php echo $v?>" target="<?php echo $second_menu_target[$tmenu_][$k]?>"><?php echo $k?></a></li>
<?php }
@reset($second_menu);
?>
</ul>
</li>
</ul>
</div>
</div>
</div>
잠깐본거 가지고는 답이 안나오네요
CSS 문제 인가 싶어서 봤는데 element style 이 직접 바뀌는걸 보니 js 부분으로 보이는데
그것까지 확인하기는 좀 힘들군요 ^^
지금 해당 소스 보니까 <ul><li> 태그가 <ul>이 중복으로 포함해서 사용되고 있고 또 아래쪽에는 <li>만 존재하는 부분이 보이는데 태그 수정을 하셔야 할듯 하며 해당 jquery 스크립트 호출되어지면서 해당 메뉴가 실행되는 스크립트 부분을 체크해 봐야 할듯 한데요 해당 부분은 이렇게만 봐서는 제작의뢰나 해당 부분은 스크립트와 해당 반영되는 html태그 부분에 손을 봐야 할듯 합니다.
위 소스로는 알 수 없고 javascript에서 제어할겁니다.
그 javascript에 해당 요소의 id 또는 class에 mouseout 이벤트가 걸려 있겠죠.
그 부분을 삭제해 버리면 될겁니다.
해당 파일을 백업해 두고 이것 저것 mouseout 관련 부분을 삭제해 가며 테스트해
보시면 잘못되도 백업파일로 되돌리면 되는것이니 염려 않으셔도 될겁니다.
