Question

我正在某个网站上工作。我有个问题。如何给JS函数赋予类名。这是我的代码：

<div class="grid-item">
    <div id="info">
        <div class="glyphicon glyphicon-search" style="hidden: hidden;">
        </div>
        <img onmouseover="show(this)" onmouseout="hide(this)" src="'smiley.gif'" />
    </div>
</div>

我的JS功能看起来像这样

function show(x) {
    x.style.hidden= visible;
}

function hide(x) {
    x.style.hidden= hidden;
}

但是在 onmouseover 和 onmouseout 中，我不想使用这个。我要展示或隐藏什么

<div class="glyphicon glyphicon-search" style="hidden: hidden;"></div>

来自html。这该怎么做？我的想法是给这个div id，然后将该id传递给函数，但是如何做到这一点。

请记住，每张照片都会有很多div标签（）。

还有如何在图像的右上角定位div？

感谢。

Answer 1

如果您使用的是jQuery，请使用它。

function show(x) {
    $(x).prev('div.glyphicon.glyphicon-search').show();
}
function hide(x) {
    $(x).prev('div.glyphicon.glyphicon-search').hide();
}

但是最好做这样的事情。为这些图像添加一个类 smiley。

<img class="smiley" src="'smiley.gif'" />

然后

$('img.smiley').on('hover', show, hide);

function show() {
    $(this).prev('div.glyphicon.glyphicon-search').show();
}
function hide() {
    $(this).prev('div.glyphicon.glyphicon-search').hide();
}

或使用mouseover / mouseout事件和事件委派

$(document)
    .on('mouseover', 'img.smiley', show)
    .on('mouseover', 'img.smiley', hide);

Answer 2

查看演示，它包含所有细节。祝你好运。

var btn = document.querySelector('.btn');


function show(x) {
  x.style.visibility = 'visible';
}

function hide(x) {
  x.style.visibility = 'hidden';
}

* {
  background: transparent;
}
.grid-item {
  width: 100%;
  height: auto;
}
.info {
  position: relative;
}
.btn,
.logo {
  position: absolute;
  cursor: pointer;
  pointer-events: auto;
}
.btn {
  right: 20%;
  top: 15%;
}
.logo {
  right: 5%;
  top: 10%;
}
article { margin-top: 5%; }

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">



<div class="grid-item">
  <div id="info" onmouseover="show(btn)" onmouseout="hide(btn)">

    <button type="button" class="btn btn-default btn-sm">
      <input type="search" /><span class="glyphicon glyphicon-search"></span> Search
    </button>

    <img class="logo" src="http://static.tumblr.com/7882552ad1b500434662c7b0ae2f3d74/pvsmty4/cp3n1htcy/tumblr_static_and_heres_the_transparent_one__48af21dc5f513bb7b872ca0128f7fcf9.png" width="100" />
  </div>
</div>
<h1>Fixed:</h1>
<article>
<ul>
  <li>CSS Property <code>visibility: hidden | visible | collapse (Tables Only)</code></li>
  <li>There is no such thing as the <del>hidden</del> property only hidden as a value.</li>
  <li>If your question concerns images, then you must include them in your code as an absolute url <samp>(ex. http://imgur.com/path/to/img.png)</samp></li>
  <li>Smiley face image is on the right side as requested.</li>
  <ul>
  <li>Set <code>position: relative;</code> to the parent element of target element.
  <li>Set the target element to <code>position: absolute;</code></li>
    <li>Position target element with <code>top, bottom, left, right</code>
      </ul>
      <li>See <a href="https://css-tricks.com/almanac/properties/v/visibility/">Visibility</a>
      <li>See <a href="https://css-tricks.com/almanac/properties/p/position/">Position</a>
    
  </ul>
</article>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

传递给javascript函数div类参数

2 个答案: