Question

所以我整夜都在研究这个问题。通常情况下，我能够找到答案，或者从包含类似代码的问题的答案中得出答案，但为此我却空了。

我有一个UL，每个LI都有自己的＆＃34; list-style-image：url（）＆＃34;属性。目标是当我将鼠标悬停在每个不同的列表项上时，与所述LI关联的图像将在相邻的DIV中显得更大。

我认为这对jQuery很简单，但要么不是，要么我直接错过了一些东西。我也对使用纯javascript的想法持开放态度。

由于stackoverflow是我最终找到大部分答案的地方，我想我会从这里开始。任何和所有的帮助表示赞赏。谢谢！

HTML：

<div class="source">
 <ul class="source-ul">
   <li style="list-style-image: url(example.svg)">image sourced</li>
   <li style="list-style-image: url(example2.svg)">from these list items</li>
 </ul>
</div>

<div2 class="appear">
 <img src=""/>
</div>

jQuery（到目前为止）：

var main = function() {
  $('li').hover(function() {
    var svgimage = $(this).attr("li[list-style-image]");
    $('.appear img').attr("src", svgimage);
  });
};

$(document).ready(main)

Answer 1

您可以执行以下操作：在每个data-src元素上添加li属性，然后将img src替换为悬停的li＆＃39; s {{1属性。

请在下面的代码段中找到更多信息

＆＃13;

data-src

＆＃13;

var main = function() {
  $('li').hover(function() {
    var svgimage = $(this).attr("data-src");
    $('.appear img').attr("src", svgimage);
   
  });
};

$(document).ready(main)

＆＃13;

Answer 2

由于您使用的<?php $list_equipments = array(); $con = new data_abstraction("resource_booking", "it_equipment_type"); if ($result = $con->make_query()->result) { while ($data = $result->fetch_assoc()) { $list_equipments[] = $data; } } else { die("SQL Error:" . $con->error); } $html->draw_container_div_start(); $html->draw_fieldset_header(''); $html->draw_fieldset_body_start(); echo "<table width='600px' style='border-width:1px; border-style:solid;'>"; $counter = 0; $no_columns = 2; //initialize 3 columns $column_width = 110 / $no_columns; foreach ($list_equipments as $key => $equipment) { if ($counter % $no_columns == 0) echo "<tr>"; echo "<td width='" . $column_width . "%' style='border-width:1px; border-style:solid'>"; draw_equipment($equipment); echo "</td>"; if ($counter % $no_columns == $no_columns - 1) echo "</tr>"; $counter++; } echo "</table>"; $html->draw_fieldset_body_end(); $html->draw_fieldset_footer_start(); $html->draw_submit_cancel(true, '2', 'btn_submit', 'RESERVE'); $html->draw_fieldset_footer_end(); $html->draw_container_div_end(); $html->draw_footer(); function draw_equipment($equipment) { $equipment_name = $equipment['img_link']; echo "<div style='text-align:left;width:120%'>"; echo "<input type='checkbox' class='toggleCheckbox'>"; echo "<img src='img/$equipment_name' alt='$equipment_name' width='120px'/><br/>"; echo $equipment['equip_type']; } echo "</form>"; return ob_get_clean();选择器，您当前的实施无效。

由于.attr()是CSS属性，而不是技术上的元素属性，因此您可以使用list-style-image方法来访问它，如下所示：

.css()

这只是谜题的一部分 - var svgImage = $(this).css("list-style-image");的值现在将包含您想要的URL周围的svgImage包装。我为此使用了JavaScript的url("...")函数，但您可以通过其他许多方法来获取URL。

这是上面jQuery示例的工作版本：

.match()

更新的JSFiddle：https://jsfiddle.net/e0dtawp6/

Answer 3

纯粹的JavaScript解决方案可能就是这样。 Link to jsfiddle

[].forEach.call(document.querySelectorAll("li"), function(e) {
	e.addEventListener('mouseover', function(){
  	document.getElementsByClassName('appear')[0].querySelector('img').src = e.style.listStyleImage.slice(4, -1).replace(/"/g, "");;
		document.getElementsByClassName('appear')[0].querySelector('p').innerHTML = "Loaded: "+e.style.listStyleImage; 	
});
});

<body>
  <div>
    <h2>Div containing UL</h2>
    <ul>
      <li style="list-style-image: url(http://bhuck.com/svg/layers.svg)">List with</li>
      <li style="list-style-image: url(http://bhuck.com/svg/server.svg)">style images</li>
      <li style="list-style-image: url(http://bhuck.com/svg/share.svg)">to be used as source</li>
      <li style="list-style-image: url(http://bhuck.com/svg/stack.svg)">when hovered over</li>
    </ul>
  </div>
  <div class="appear">
    <h2>Div to have images appear on</h2>
    <img src="http://bhuck.com/svg/share.svg" height="48" width="48">
    <p>Willing to use an img element if necessary</p>
  </div>

</body>

Answer 4

您从url错误地获取了li部分，它是style属性，您可以这样做。

var main = function() {
  $('li').hover(function(event) {
    var rawURL = $(event.currentTarget).css('list-style-image');
    var url = rawURL.match(/url\("(.*)"\)/i)[1];
    $('.appear img').attr("src", url);
  });
};

$(document).ready(main)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="source">
 <ul class="source-ul">
   <li style="list-style-image: url(https://cdn3.iconfinder.com/data/icons/fatcow/32/bullet_red.png)">image sourced</li>
   <li style="list-style-image: url(https://cdn4.iconfinder.com/data/icons/momenticons-gloss-basic/momenticons-gloss-basic/32/bullet-green.png)">from these list items</li>
 </ul>
</div>

<div class="appear">
 <img src=""/>
</div>

Answer 5

而不是 attr 使用 css 来获取元素的css属性。

试试这个：

  var main = function() {
  $('li').hover(function() {
    var svgimage = $(this).css("list-style-image");
    // remove url() using regular expression
    svgimage = svgimage.replace('url(','').replace(')','').replace(/\"/gi, "");
    $('.appear img').attr("src", svgimage);
  });
};

来自<li>列表样式图像attr的源图像将显示在另一个div中

5 个答案: