Question

我正在获取将在鼠标悬停上使用的图像，图像被提取但它只是在鼠标悬停中不起作用。当我从数据库中得到任何想法我做错了什么时，它也有效吗？

视图：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 

<title>Products</title>

<!-- Bootstrap -->
    <?php echo link_tag('css/bootstrap.min.css')?>
    <!-- <link href="css/bootstrap.min.css" rel="stylesheet"> -->
    <link href="css/bootstrap-theme.min.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Raleway:200' rel='stylesheet' type='text/css'>



    <link rel="stylesheet" type="text/css" href="css/STYLE01.css">
    <link rel="stylesheet" type="text/css" href="css/NAVIGATION.css">
    <link rel="shortcut icon" href="assets/ICON.PNG">

<style type="text/css">
::-webkit-scrollbar-thumb:vertical {
background-color: #EF426F; /*color of main scrollbar*/
height: 10px; /*height of scrollbar*/
}
::-webkit-scrollbar {
height: 0px;
width: 4px; /*width of the slider*/
background-color: #FFFFFF; /*color of the slider*/
}
body {
    background-image: url("assets/PRODUCTS_LOGOS.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}
</style>
</head>

<body>




<div class="container">
    <center><br><br><br><br><br><br>
 <?php foreach ($category as $products): ?>


<a href="<?php echo base_url().'product_view/view_products/'.$products->id ?>"><img src="<?php echo base_url() . 'assets/' . $products->img_name . $products->ext; ?>" 
     onMouseOver="<?php echo base_url(). 'assets/'.$products->hover_img_name . $products->hover_ext;?>" onMouseOut="<?php echo base_url() . 'assets/' . $products->img_name . $products->ext; ?>" width="177" height="140"  width="177" height ="140"></a>'
   <?php endforeach; ?>
 <br><br><br><br><br></center>
</div>
</div>

<br><br><br><br>
<br><br><br><br>
<div class="footer_white">
I L L V M I N A T I O N &nbsp; S T U D I O S  <br> 2 0 1 5
</div>
<br><br>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

<BODY onselectstart="return false;" ondragstart="return false;"> 
</body>
</html>

控制器：

function index()
 {
   $this->load->helper(array('form'));
   $data['category'] = $this->User->get_category();
   $this->load->view('products_view',$data);
 }

模型：

public function get_category(){
        $p = $this->db->query("select * from product_category");
        $p1 = $p->result();
        return $p1;
    }

Answer 1

我们无法直接分配事件。需要财产this.src

试试这个：

<img src="<?php echo '\''.base_url() . 'assets/' . $products->img_name . $products->ext.'\''; ?>" 
 onMouseOver="this.src=<?php echo '\''.base_url(). 'assets/'.$products->hover_img_name . $products->hover_ext.'\'';?>" onMouseOut="this.src=<?php echo '\''.base_url() . 'assets/' . $products->img_name . $products->ext.'\''; ?>" width="177" height="140"  width="177" height ="140">

Answer 2

<img onMouseOver="javascript here">

你应该写一些鼠标悬停的javascript代码，而不是php代码。 PHP应该只回显你的javascript

codeigniter onmouseover不工作

2 个答案: