Question

将鼠标悬停在链接和div更改内容

上

您好，我在使用某些html / css编码时遇到问题。我尝试了很多解决方案但没有成功。我想将鼠标悬停在第一个链接上，一个div内容隐藏，一个显示。当我将鼠标悬停在第二个链接上时，一个div隐藏，另一个出现。这是我的代码和css：

public static class PlaceholderFragment extends Fragment {
    /**
     * The fragment argument representing the section number for this
     * fragment.
     */
    private static final String ARG_TAB_NUMBER = "tab_number";

    public PlaceholderFragment() {
    }

    /**
     * Returns a new instance of this fragment for the given section
     * number.
     */
    public static PlaceholderFragment newInstance(int tabNumber) {
        PlaceholderFragment fragment = new PlaceholderFragment();
        Bundle args = new Bundle();
        args.putInt(ARG_TAB_NUMBER, tabNumber);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_coversations, container, false);
        RecyclerView recycle = (RecyclerView) rootView.findViewById(R.id.recycleView);
        List<RecyclerData> list = new ArrayList<>();
        RecycleViewAdapter adapter = new RecycleViewAdapter(list);
        recycle.setAdapter(adapter);
        RecyclerData r = new RecyclerData("Test Title", "Test Message", 0);
        list.add(r);
        adapter.notifyDataSetChanged();
        return rootView;
    }
}

的CSS：

enter code here:

> <body id="tijelo" >
>  
>             <img src="screen12.jpg" id=screen>
>                   
>               
>     <div id="naslov">
>     <h1 id="naslov1">Servis računala i laptopa</h1>
>     </div>
>     
>       <div id="underline">
>        </div>
>          <div class="kontenjeri"> 
>        
>         <a href="servis.html" id="majstor" class="botuni">Servis računala i laptopa</a>
>         <a href="spas.html" id="spas" class="botuni">Spašavanje podataka</a>
>         <a href="mailto:t-men@net.hr" id="poruka" class="botuni">Kontaktiraj me</a>
>               </div>
>     <div id="info" class="uvod">
>         <p id="infop"><span>Dobrodošli na moju web stranicu!</span> <br /><br /> <br /> <br /> Popravci računala, sastavljanje novih,
> servis laptopa,<br /> instalacija windowsa, spašavanje podataka,
> čišćenje računala od virusa,<br />  <br /><br /> <br /> <br /> Više o
> uslugama na linkovima.  </p>
>     </div>
>     
>     
>     <div id="info2" class="prvi">
>         <p id="infop2"> Popravci računala, sastavljanje novih, servis laptopa,<br /> instalacija windowsa, spašavanje podataka, čišćenje
> računala od virusa...<br />    </p>
>     </div>
>     
>     <div id="footer">
>     <p id="footp">© t-men 2017</p>
>     </div>

当我将鼠标悬停在链接“servisračunalailaptopa”上时，我想将“信息”隐藏起来，并在他的地方div“info2”出现。

Answer 1

简短回答：

在你的情况下，你不能，因为你试图操纵一个不是链接兄弟的元素。

你必须使用JavaScript。

如何执行此操作的简短示例，假设已使用display: none隐藏了两个元素。

普通JavaScript

let link1 = document.querySelector('#majstor');  // note: let is better than using var
let link2 = document.querySelector('#spas');

let div1 = document.querySelector('#info');
let div2 = document.querySelector('#info2');

link1.addEventListener('mouseenter', function() { showDiv(div1) });
link2.addEventListener('mouseenter', function() { showDiv(div2) });

link1.addEventListener('mouseleave', function() { hideDiv(div1) });
link2.addEventListener('mouseleave', function() { hideDiv(div2) });

function showDiv(div) {
    div.style.display = 'none';
}

function hideDiv(div) {
    div.style.display = 'block';
}

有两个相似的选择器：相邻的兄弟和一般兄弟姐妹。

它们都在DOM中的同一级别上工作，因此像

这样的树

parentA
    childA
    childB
    childC
        subChildCA
        subChildCB
parentB
    childD
    childE

允许您在自己父级的子级上使用同级选择器。换句话说，你只能告诉你的兄弟姐妹做某事，但你不能告诉你的姨妈/叔叔，侄女/侄子等等，

以下是此

的具体示例

HTML

<a id="link1" href="#">link 1</a>
<a id="link2" href="#">link 2</a>

<div id="content1">hello world</div>
<div id="content2">good bye world</div>

CSS

#content1 { display: none; }
#content2 { display: none; }

#link1:hover {
  color: red;
}

#link1:hover ~ #content1 {
  display: block;
}

#link2:hover ~ #content2 {
  display: block;
}

有关~选择器的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors

有关+选择器的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

将鼠标悬停在链接和div更改内容上

1 个答案: