워드 프레스 링크 위에 마우스를 올려 여러 요소

-2

이 워드 프레스 홈페이지 콘텐츠 섹션의 다음 HTML워드 프레스 링크 위에 마우스를 올려 여러 요소

http://goodsense.etempa.co.uk

<div class="seewidgets">[widgets_on_pages id="Home page middle box"]</div> 

<div class="top-area"> 
    <div class="image"> 
     <img alt="Primary Care" src="/wp-content/uploads/scenarios/primary_care.png" /> 
    </div> 

    <div id="contact_box" class="home_side_box"> 
     <div class="clients"> 
      <img alt="Contact Us" src="/wp-content/uploads/buttons/contact_button.png" /> 
     </div> 
    </div> 

    <div class="home_side_box home_side_box_gap"> 
     <div class="home_side_box_heading">Social Media</div> 
      //Social Media Stuff 
     </div> 

     <div class="home_side_box home_side_box_gap"> 
      <div class="home_side_box_heading">Example Clients</div> 
       <div class="clients"> 
        <img alt="" src="/wp-content/themes/twentytwelve/images/client.png" />   
       </div> 
      </div> 

      <div class="home_text_box" id="scenario_intro_text_div"> 
       <p>If you work in primary healthcare you know that anything can happen. </p><p>Your staff may be required to handle a difficult ... <a href='/primary-care'>Read More</a></p> 
      </div> 
     </div> 
    </div> 
</div>

당신이 볼 수 있듯이 (div의의 세 열 중간 부분)가 변경 왼쪽에 섹터 목록이 있습니다.이 섹터 목록은 워드 프레스 메뉴, 중앙 이미지, 중앙 텍스트 및 오른쪽에 예제 클라이언트입니다.

이 웹 사이트는 Wordpress로 작성되었으며 위 내용은 템플릿이 아닌 Wordpress의 'Edit Page'부분에 입력됩니다 (템플릿 파일에 대한 완전한 액세스 권한이 있지만). 사용자가 왼쪽의 섹터 위로 마우스를 가져 가면 중앙 이미지와 중앙 텍스트 및 오른쪽 클라이언트 이미지가 모두 섹터 위로 이동하여 일치하도록 변경할 수 있습니까?

내가 가진 주된 문제는 섹터 목록이 Wordpress 메뉴에 있고 가능하다면 그 방법대로 유지하고 싶지만 필요한 경우 하드 코드 할 수 있습니다.

출처

2013-05-08 Pippa Rose Smith

jQuery를 사용해야합니다.

이것은 가야 당신은 시작 :

이

$('#menu-item-65').mouseover(function() { 
    // when element is moused over, change html elsewhere on page 
    $('.top-area .image').html('<img src="path/to/your/image.jpg" />'); 
    $('.home_side_box .clients').html('<img src="path/to/your/other/image.jpg" />'); 
    $('#scenario_intro_text_div').html('<p>Your text here</p>'); 
});

첫 번째 줄은 기본적으로 #menu-item-65 (왼쪽 "분야"탐색 메뉴에서 개인 li들 중 하나의 ID가) mouseovered 때, 그것은을 대체한다는 것을 의미 함수 내에서 지정된 요소의 내부 HTML.

워드 프레스 링크 위에 마우스를 올려 여러 요소

답변

관련 문제